title: React creating dynamically refs with Typescript
body: <p>I have a <code>table</code> list where each row has a <code>menu</code> button, for which I need a <code>ref</code>. I am using react mui in my project and it's <a href="https://v4-0-2.material-ui.com/components/menus/" rel="nofollow noreferrer">menu</a>. I have tried creating the refs like this:</p>
  
  <pre><code>const {rows} = props;
  const refs = Array.from({length: rows.length}, a =&gt; React.useRef&lt;HTMLButtonElement&gt;(null));
  </code></pre>
  
  <p>And then tried to use the inside the <code>map</code> function like this on each <code>button</code>:</p>
  
  <pre><code>&lt;Button
     ref={refs[index]}
     aria-controls="menu-list-grow"
     aria-haspopup="true"
     onClick={() =&gt; handleToggle(row.id)}
  &gt;Velg
  &lt;/Button&gt;
    &lt;Popper open={!!checkIfOpen(row.id)} anchorEl={refs[index].current} keepMounted transition disablePortal&gt;
      {({TransitionProps, placement}) =&gt; (
         &lt;Grow
          {...TransitionProps}
          style={{transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'}}&gt;
         &lt;Paper id="menu-list-grow"&gt;
           &lt;ClickAwayListener onClickAway={(e) =&gt; handleClose(e, refs[index].current)}&gt;
            &lt;MenuList&gt;                                                        
              &lt;MenuItem
               onClick={(e) =&gt; handleClose(e, refs[index].current)}&gt;Profile&lt;/MenuItem&gt;
             &lt;MenuItem onClick={(e) =&gt; handleClose(e, refs[index].current)}&gt;My account&lt;/MenuItem&gt;
             &lt;MenuItem onClick={(e) =&gt; handleClose(e, refs[index].current)}&gt;Logout&lt;/MenuItem&gt;
          &lt;/MenuList&gt;
        &lt;/ClickAwayListener&gt;
      &lt;/Paper&gt;
    &lt;/Grow&gt;
   )}
  &lt;/Popper&gt;
  </code></pre>
  
  <p>But, then I get an error:</p>
  
  <blockquote>
    <p>React Hook "React.useRef" cannot be called inside a callback. React
    Hooks must be called in a React function component or a custom React
    Hook function  react-hooks/rules-of-hooks</p>
  </blockquote>
  
  <p>How can I do this dynamically, so that I can use refs inside the map function. I have tried with the suggestion in the answers, but I couldn't get it to work.
  Here is the <a href="https://codesandbox.io/embed/cranky-hawking-qy64c" rel="nofollow noreferrer">codesandbox of the example</a>.</p>