React useState within mapped parent component

Im new to React and im trying to understand useState. So im pulling in an array of products and then mapping the array to display each product card:

export default function ProductList({ products }) {

  return (
        <Grid templateColumns='repeat(3, 1fr)' columnGap={6} rowGap={10}>
          {
            products.map(product => (
              <ProductCard key={product.node.id} product={product} productID={product.node.id} />
            ))
          }
        </Grid>
  )
}

and inside of my ProductCard I have a bunch of useState, to handle product options, variants, etc.

const [available, setAvailable] = useState(true)
const [selectedVariant, setSelectedVariant] = useState('')
const [selectedOptions, setSelectedOptions] = useState('')
const { addToCart } = useContext(CartContext)

So my question is, do each of the ProductCard actually share the same useState, even though they are being mapped?