title: Addinng items to an Accordion in React
body: <p>I'm making a diet project
  I have two inputs with meal name and hour, (eg: Breakfast 8am). Then i have a button that renders an Accordion with those values and another button. The Accordion is a Material UI component, so to render a new Accordion everytime, i passed the Accordion as an object property, then i add that obj to an empty array and render the array with the map method.</p>
  <p>The button created with each accordion does this:</p>
  <pre><code>const [foodList, setFoodList] = useState([]);
  
  function addFood() {
      const food = {
        id: Math.random(),
        name: input,
        amount: amount,
      };
  
      setFoodList([...foodList, food]);
    }
  </code></pre>
  <p>And the accordion content is this:</p>
  <pre><code>&lt;Typography&gt;
            {foodList.map((item) =&gt; {
              return (
                &lt;div key={item.id}&gt;
                  &lt;h1&gt;{item.name}&lt;/h1&gt;
                  &lt;h2&gt;{item.amount}&lt;/h2&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/Typography&gt;
  </code></pre>
  <p>When i render the accordion for the first time, it does not add the food object to the foodList. The second time, it adds one time and then no more, the third time adds twice and then no more.</p>
  <p>Why is this happening?</p>