title: Why is clearTimeout not closing out timeout within closure
body: <p>I'm trying to make an onChange closure that will be used for live search, however, right now it is making an AJAX request for everything that is typed and not clearing out the timeout. What am I missing?</p>
  <pre><code>export function SearchForm({ search, page, btnText, fixPage}) {
    const [term, setTerm] = useState('');
    
    const handleSubmit = (e,term) =&gt; {
      e.preventDefault();
      search(term, page);
      fixPage();
      
    }
    
    // const delayedQuery = useCallback(debounce((e,val) =&gt; handleSubmit(e,val), 500),[])
  
    // const handleChange = e =&gt; {
    //   const { value } = e.target;
    //   setTerm(value);
    //   delayedQuery(e,value);
    // };
  
    const handleChange = (timeout =&gt; e =&gt; {
      const { value } = e.target;
        clearTimeout(timeout);
  
        timeout = setTimeout(() =&gt; {
          handleSubmit(e,value);
        }, 1000);
  
      setTerm(value);
      })();
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input type=&quot;text&quot;
               placeholder=&quot;Search for a specific company...&quot;
               value={term}
               onChange={handleChange} /&gt;
  
        &lt;button type=&quot;submit&quot;&gt;Find {btnText}&lt;/button&gt;
      &lt;/form&gt;
    );
  }```
  </code></pre>