How to src image from a list in React

Question

I am trying to use images from a list as a source from a react component

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';


const ProductComponent = ({ category, idx }) =>{
  const images = [
    './unisex-heavy-blend-hoodie-black-zoomed-in-2-638cce72d61d2.png',
    './unisex-staple-t-shirt-silver-front-638ca71569cc4.png',
    './unisex-staple-t-shirt-black-heather-zoomed-in-638ca1af35d94.png'
  ]
  return (
    <Card style={{ width: '25rem' }}>
      <Card.Img variant="top"  src={require(images[idx])} /> 
      <Card.Body>
        <Card.Title>{category}</Card.Title>
        <Button variant="primary">{images[idx]}</Button>
      </Card.Body>
    </Card>
  );
}

export default ProductComponent;

The src in doesn't work. The {images[idx]} in is for testing purposes, and it shows the link as it should. If i replace {images[idx]} in src with one of the link in the images list it works. I don't understand why. Could someone explain it? Thanks

I tried to put the link directly in src, and i printed out the {images[idx]} as a button to see its the right one