title: useRef for element in loop in react
body: <p>Using React, i have a list of ref statically declared this way:</p>
  <pre><code>  let line1 = useRef(null);
    let line2 = useRef(null);
    let line3 = useRef(null);
    ...
    //IN MY RENDER PART
    &lt;li ref={(el) =&gt; (line1 = el)}&gt;line1&lt;/li&gt;
    &lt;li ref={(el) =&gt; (line2 = el)}&gt;line1&lt;/li&gt;
    &lt;li ref={(el) =&gt; (line3 = el)}&gt;line1&lt;/li&gt;
  </code></pre>
  <p>the refs are then passed to an animation function and everything works correctly;
  now things changed a bit and i create the list item using map and im no longer able to ref the element correctly;
  i tried something like:</p>
  <pre><code>{menu.menu.map((D) =&gt; {
  let newRef = createRef();
                      LiRefs.push(newRef);
                      return (
                        &lt;li
                          key={D.id}
                          ref={(el) =&gt; (newRef = el)} &gt;
                          {D.label}
                        &lt;/li&gt;
                      );
                    })}
  </code></pre>
  <p>but the array i pass to the animation function is empty (i guess because the function is called inside useEffect hook and LiRefs is not yet a useRef)
  i also know the number of <li> i will create, so i can declare them at the beginning and the reference with something like</p>
  <pre><code>ref={(el) =&gt; (`line${i}` = el)}
  </code></pre>
  <p>which is not working
  any other solution i could try?</p>