title: onChange and onSelect are not working for Select inside a loop in React Hooks
body: <p>I Have a scenario, where i need to have multiple Select tags inside loops, but onselect event is not working for any of them, please find the below code. thanks in advance.</p>
  
  <pre><code>const ThirdStepMap = ({csvFields, profileFileds}) =&gt; { // last row, no border-bottom class to be added
  
  const [selectData, setSelectData] = useState('');
  
  console.log('selectData', selectData);
  return(
      &lt;div className="modal-body no-pad"&gt; 
      &lt;div className="ap-map-head"&gt;
          &lt;div className="row"&gt;
              &lt;div className="col p-0"&gt;CSV file field&lt;/div&gt;
              &lt;div className="col p-0"&gt;Airborne fields&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="ap-map-body"&gt;
          {
              csvFields.map(e =&gt; {
                  return(
                      &lt;div className="row border-bottom"&gt;
              &lt;div className="col p-0"&gt;
                  &lt;div className="form-group static-text d-flex align-items-center"&gt;
                      &lt;label for="staticEmail" className=" col-form-label"&gt;{e}&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="col p-0"&gt;
                  &lt;div className="form-group"&gt;
                      &lt;select className="form-control" onChange={(e) =&gt; setSelectData(e.target.value)}&gt;
                      {
                          profileFileds.map(r =&gt; &lt;option key={r.fieldName} selected={e.toLowerCase().startsWith(r.fieldName.toLowerCase().substr(0,3)) ||  r.fieldName === 'select'} value={r.fieldName}&gt;{r.displayName}&lt;/option&gt;)
                      }
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                  )
              })
          }
  
      &lt;/div&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>}</p>