title: React sends last element in map when passing to function
body: <p>I am trying to create dynamic UI elements using react and have created a loop of elements by mapping over an array and on clicking the element, it passes the values to a function. My code looks something like below</p>
  <pre><code>const [shortlistedIds, setShortlistedIds] = useState([]);
  const attachmentInputRef = useRef();
  
  const handleOpenFilePicker = async () =&gt; {
    attachmentInputRef.current.click();
  };
  
  //somewhere in code, set the IDs
  setShortlistedIds([&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;]);
  
  const handleFilePicker = async(e) =&gt; {
    console.log(e.target.id)
    let uploadFiles = [...e.target.files]
    const apiRes = await api.createAttachment(e.target.id, uploadFiles)
   }
  
  return(
    {shortlistedIds.map((myId) =&gt; (
      &lt;button
         id={myId}
         className=&quot;attachment-button pull-right&quot;                 
         onClick={handleOpenFilePicker}
         style={{ position: &quot;absolute&quot; }}
      &gt;
         click me {myId}
      &lt;/button&gt;
      &lt;input
          id={myId}
          ref={attachmentInputRef}
          type=&quot;file&quot;
          style={{ display: &quot;none&quot; }}
          name=&quot;file&quot;
          onChange={(e) =&gt; {handleFilePickerChange(myId, e);}}
          multiple
       /&gt;
  
    )
  )};
  )
  
  </code></pre>
  <p>The html is rendered properly with correct id and text for each button but on clicking, the value printed in console from the handleFilePicker is always the last ID, &quot;4&quot; from above example, not matter which button I click. Not sure what the issue is here.
  (please ignore any typos as this is an example code based on the actual code. It is not feasible to paste the actual code here)</p>