title: Material ui Loading Button Loads all button onClick in React js loop (using map)
body: <p>So, I was working on commerce.js API. But when I press add to cart, it takes a bit of time to update the cart items number (from API) so I thought I should add a loading button until the cart items load. I found LoadingButton from <strong>@mui/lab</strong> so I used it. but the problem is even though that button is inside the loop when pressing onClick all the other button also goes to the loading state. IDK am I missing something or is my coding false?. Please check below &amp; help me. Thanks. :) <br>
  <em><strong>Here is the main problem.</strong></em></p>
  <p><a href="https://i.stack.imgur.com/g3p6N.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g3p6N.gif" alt="material ui" /></a></p>
  <p>Here is the app.js where you can see loading state &amp; other API fetching<br>
  <a href="https://i.stack.imgur.com/qEncG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qEncG.png" alt="enter image description here" /></a></p>
  <p>products component in app.js. you can see I passed down the products &amp; loading props <br>
  <a href="https://i.stack.imgur.com/EKAbS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EKAbS.png" alt="enter image description here" /></a></p>
  <p>products loop &amp; props down to product component <br>
  <a href="https://i.stack.imgur.com/yH4iW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yH4iW.png" alt="enter image description here" /></a></p>
  <p>finally the cart loading button in the product component with loading props. it works but all other buttons also loads at the same time. <br>
  <a href="https://i.stack.imgur.com/x908f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x908f.png" alt="enter image description here" /></a></p>