title: Uncaught TypeError: Cannot read property 'value' of null in ReactJS
body: <p>I am trying to create a search bar in react that searches through TMDB API but I'm having some issues. Whenever I type into the search bar I get an error saying that <code>Cannot read properties of null (reading 'value')</code> and I'm not sure what the issue could be and why its returning as null. I call the mention in</p>
  <pre><code> function Search() {
    const [searchQuery, setSearchQuery] = useState(&quot;&quot;); 
    const [timeoutId, updateTimeoutId] = useState();
  
    const fetchData = async (searchString) =&gt; {
      const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&amp;language=en-US&amp;query=${searchString}&amp;page=1&amp;include_adult=false`);
      console.log(response);
    };
  
    const onTextChange = (e) =&gt; {
      clearTimeout(timeoutId);
      setSearchQuery(e.target.value);
      const timeout = setTimeout(() =&gt; fetchData(e.target.value), 500);
      updateTimeoutId(timeout);
    };
  
    return(
      &lt;div&gt; 
        &lt;SearchBox&gt;
        &lt;SearchInput placeholder=&quot;SEARCH&quot; value={searchQuery} onChange={onTextChange}&gt;&lt;/SearchInput&gt;
        &lt;/SearchBox&gt;&lt;/div&gt;
    );
  }
  </code></pre>
  <p>This is the searchInput code</p>
  <pre><code>const SearchInput = styled.input`
    color: black;
    font-size: 16px;
    font-weight: bold;
    border: none;
    outline: none;
    margin-left: 15px;
  `;
  </code></pre>