title: This expression is not callable when destructuring an array of React hooks in TypeScript
body: <p>In my React TS component I have a bunch of fields, contrived example below, that check a specific condition, and if it is not met, set the specific field error to true, to be reflected and the component DOM (and thus not submit) However when I have the code below it throws an <code>expression not callable</code> on the <code>setErr</code> function.</p>
  
  <pre><code>const App = () =&gt; {
    const [name, setName] = React.useState("");
    const [email, setEmail] = React.useState("");
    const [nameError, setNameError] = React.useState(false);
    const [emailError, setEmailError] = React.useState(false);
    return (
      &lt;div className="App"&gt;
        &lt;input
          type="text"
          value={name}
          style={{
            border: `1 px solid ${nameError ? "red" : "black"}`
          }}
          onChange={e =&gt; {
            setName(e.target.value);
          }}
        /&gt;
        &lt;input
          type="text"
          value={email}
          onChange={e =&gt; {
            setEmail(e.target.value);
          }}
          style={{
            border: `1 px solid ${emailError ? "red" : "black"}`
          }}
        /&gt;
        &lt;button
          onClick={() =&gt; {
            const errors = [
              [setNameError, name.length],
              [setEmailError, email.length]
            ];
  
            let canSubmit = true;
            errors.forEach(validation =&gt; {
              const [setErr, condition] = validation;
              console.log(!condition);
              if (!condition) {
                canSubmit = false;
                setErr(true); // &lt;---- ERROR HERE
              }
            });
  
            if (canSubmit) { /* submit the form */ } 
          }}
        &gt;
          submit
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>This only errors in TypeScript as it works fine in vanilla/jsx. And doesn't compile in some build systems. </p>
  
  <p>Full error is:</p>
  
  <pre><code>This expression is not callable.
    Not all constituents of type 'string | number | boolean | Dispatch&lt;SetStateAction&lt;boolean&gt;&gt;' are callable.
      Type 'string' has no call signatures.
  </code></pre>
  
  <p>I am especially confused why it thinks <code>setErr</code> is of type string, when it should be equal to the setNameError function destructured from useState.</p>