title: Displaying an array received from Usestate hook with Typescript
body: <p>I am trying to display an array of information using map that is received from the usestate hook. When writing the map function, I get a "Cannot invoke an expression whose type lacks a call signature." Error. If I create a function that returns the same information and call that function, I do not get the error.</p>
  
  <pre><code>    export default function Portfolio() {
        const [portfolioData, setPortfoloioData] = useState&lt;IProject[] | []&gt;([])
  
        useEffect(() =&gt; {
          const portfolio: IProject[] = getPortfolio()
          setPortfoloioData(portfolio)
        }, [])
  
  //Function to display the map that works.
        const displayBlocks = (portfolioData: IProject[]): JSX.Element[] =&gt; {
          return portfolioData.map((item, index) =&gt;
            &lt;ProjectBlock key={index} project={item} index={index} /&gt;
          )
        }
  
        return (
          &lt;div className='text-center pt-3'&gt;
            &lt;h1 className='pb-4'&gt;Portfolio&lt;/h1&gt;
  
  //This works without error
            {displayBlocks(portfolioData)} 
  
  //This shows the missing call signature error even though
  //it is the same as what is returned by the displayBlocks function.
            {portfolioData.map((item, index) =&gt;
              &lt;ProjectBlock key={index} project={item} index={index} /&gt;
            )}
          &lt;/div&gt;
        )
      }
  </code></pre>
  
  <p>I would like to figure out how to display the information with a simple map within the return section without having to call another function. What am I doing wrong?</p>