Не работает Input

import React from 'react';
import styles from './Search.module.scss';
const Search = ({ searchValue, setSearchValue }) => {
  return (
    <div className={styles.root}>
      <span class='material-symbols-outlined'>search</span>
      <input
        type='text'
        onChange={(event) => setSearchValue(event.target.value)}
        value={searchValue}
        className={styles.input}
        placeholder='Вже знаешь чого хочеш?'
      />
    </div>
  );
};

export default Search;

задал себе контролируемый input для поиска на странице но как только добавляю value={searchValue} Input становиться не активным

вот как этот State задан в app.js

function App() {
  const [searchValue, setSearchValue] = React.useState(' ');
  return (
    <div className='wrapper'>
      <Header searchValue={searchValue} setSeachValue={setSearchValue} />
      <main className='content'>
        <Routes>
          <Route path='/' element={<Home searchValue={searchValue} />} />