title: Getting "This expression is not callable" in Typescript React Application
body: <p>I'm trying to separate my logic from my layout component in a Typescript React Application, but I think there's something wrong with the return type of my controller return object.</p>
  <p>I tried the following to make a <code>type</code> which indicates which is the return type but typescript is complaining</p>
  <p><strong>controller.tsx</strong>, here i got:</p>
  <blockquote>
  <p>TS2322: Type '() =&gt; { iconsList: floatingNavbarItem[]; value: string;
  handleChange: (event: SyntheticEvent, newValue: string) =&gt; void; }' is
  not assignable to type 'ControllerFN'.</p>
  </blockquote>
  <pre><code>type ControllerFN = {
      iconsList: floatingNavbarItem[];
      value: string;
      // eslint-disable-next-line no-unused-vars
      handleChange: (event: SyntheticEvent, newValue: string) =&gt; void;
  };
  
  const floatingNavbarController: ControllerFN = () =&gt; {
    const [value, setValue] = useState('addPlan');
  
    const handleChange = (event: SyntheticEvent, newValue: string) =&gt; {
      setValue(newValue);
    };
  
    const iconsList:floatingNavbarItem[] = useMemo(
      () =&gt; [
        {
          value: 'addPlan',
          label: 'addPlan',
          icon: &lt;FontAwesomeIcon icon={faCirclePlus} /&gt;,
        },
      ],
      [],
    );
  
    return { iconsList, value, handleChange };
  };
  </code></pre>
  <p><strong>floatingNavbar.jsx</strong></p>
  <pre><code>const FloatingNavbar: FunctionComponent = () =&gt; {
    const { iconsList, value, handleChange } = floatingNavbarController();
    return (
      &lt;Navbar
        value={value}
        onChange={handleChange}
      &gt;
        &lt;FloatingNavbarItem iconsList={iconsList} /&gt;
      &lt;/Navbar&gt;
    );
  };
  </code></pre>
  <p>Here I got:</p>
  <blockquote>
  <p>TS2349: This expression is not callable.   Type 'ControllerFN' has no call signatures.</p>
  </blockquote>
  <p>when I call floatingNavbarController(); at line 2</p>
  <p>and</p>
  <blockquote>
  <p>TS2322: Type '{ iconsList: any; }' is not assignable to type 'IntrinsicAttributes &amp; floatingNavbarItem[]'.   Property 'iconsList' does not exist on type 'IntrinsicAttributes &amp; floatingNavbarItem[]'.</p>
  </blockquote>
  <p>at props iconsList at line 8</p>
  <p>What am I doing wrong? Any ideas?</p>