attach state to dynamically rendered element

I am working on one of my first Gatsby projects and I am dynamically rendering products from Contentful. I would like the product description to show on hovering. I know how to do this on one image, but since it is dynamically rendered, I don't know how to set the state for the different images. Now, when you hover over one, the description shows on all of them. I cannot set state inside the .map. I might just be completely thinking in the wrong direction, but I haven't found anything online on how to handle this.

let [isShown, setIsShown] = useState(false);

const productList = products.map((product) => {
    return (
      <div
        key={product.id}
        className="product-card"
    
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}
      >
        {isShown && (
          <p className="product-description">{product.productDescription}</p>
        )}
      </div>
    );
  });

Thanks in advance if someone can give me a clue on which direction to think in!

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum