title: react state maps not showing data even after updating the states - react js
body: <p>This one is the main code:</p>
  <pre><code>const [selectedProductList, setSelectedProductList] = useState([]);
  
  const handleProductSelection = (event) =&gt; {
      const { name, value, label } = event;
      setSelectedProductList((selectedProductList) =&gt; [
          ...selectedProductList,
          {
              product_id: value,
              quantity: &quot;&quot;,
              unit_id: &quot;&quot;,
              price_per_unit: &quot;&quot;,
          },
      ]);
  };
  useEffect(() =&gt; {
      console.log(&quot;selectedProductList &gt;&gt;&quot;, selectedProductList);
  }, [selectedProductList]);
  
  
  
  return (
      &lt;&gt;
          //This select is just using the react select and its triggering handleProductSelection onChange
          &lt;Select
              id=&quot;product_id&quot;
              name=&quot;product_id&quot;
              onChange={handleProductSelection}
              value={products.filter(function (option) {
                  return option.value === formData.product_id;
              })}
              options={products}
              className={` ${
                  errors[&quot;product_id&quot;] ? &quot;is-invalid&quot; : &quot;&quot;
              }`}
          /&gt;
  
          //THIS IS THE MAIN POINT OF ISSUE
          //THIS ONE IS NOT DISPLAYING
          {selectedProductList.map((prod) =&gt; {
              prod &amp;&amp; (
                  &lt;div&gt;
                      DUMMY &lt;span&gt;{prod.product_id}&lt;/span&gt;
                  &lt;/div&gt;
              );
          })}
  
      &lt;/&gt;
  )
  
  </code></pre>
  <p>However, this one does work:</p>
  <pre><code>//THIS ONE IS CONSOLING ON EVERY CHANGE
  {selectedProductList.map((prod) =&gt; {
      prod &amp;&amp; &lt;div&gt;{console.log(`hit here`)}&lt;/div&gt;;
  })}
  
  </code></pre>
  <p>What is wrong here. I have added the necessary comment on the code itself.</p>
  <p>I have also checked on <code>useEffect</code> and it is updating the state correctly which I can verify by looking at the console inside <code>useEffect</code></p>