title: React returning a function in a custom hook, whose internal hook returns an object
body: <p>I recent upgraded my use-debounce react package. the breaking change was that the hook returned an object instead of an array. I am unable to update the hook so that it works with the new change. <a href="https://codesandbox.io/s/callback-forked-n630o?file=/src/index.js" rel="nofollow noreferrer">I have created a codesandbox to demonstrate the issue</a>, where setting the state fails, as the setter returned from the hook isnt configured right. For the purpose of the sandbox, i threw the hook component inside the main component so all the info would be in one spot.</p>
  <p>The error is <code>setState is not a function</code></p>
  <p>Heres the code from the sandbox if you dont feel like looking</p>
  <pre><code>const Input = () =&gt; {
    // hook that would normally be in a seperate component
    const useDebouncedState = (
      initialState,
      durationInMs = 200,
      options = {}
    ) =&gt; {
      const [internalState, setInternalState] = useState(initialState);
      const debouncedSetter = useDebouncedCallback(
        () =&gt; debouncedSetter.callback(setInternalState),
        durationInMs,
        options
      );
      return [internalState, debouncedSetter];
    };
  
    // this would be set in the main components
    const [searchText, setSearchText] = useDebouncedState(&quot;&quot;, 200, {
      maxWait: 1000
    });
  
    // this is where i set
    return (
      &lt;&gt;
        &lt;input type=&quot;text&quot; onChange={(e) =&gt; setSearchText(e.target.value)} /&gt;
        &lt;h1&gt;{searchText}&lt;/h1&gt;
      &lt;/&gt;
    );
  };
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;Input /&gt;, rootElement);
  </code></pre>