In React component I have an array of objects:

const books = [
  {
    id: 1,
    name: "The Chrysalids",
    author: "John Wyndham",
    image: "chrysalids",
  },
  {
    id: 2,
    name: "In Cold Blood",
    author: "Truman Capote",
    image: "in-cold-blood",
  },
  {
    id: 3,
    name: "Jane Eyre",
    author: "Charlotte Brontë",
    image: "jane-eyre",
  },
];

And I have mapped it like this:

<div className="row">
        {books.map((book) => (
          <BookComponent
            key={book.id}
            name={book.name}
            author={book.author}
            alt={book.name}
            src={require("./assets/images/" + book.image + ".png")}
          />
        ))}
      </div>

Everything works fine, but the image is not working in html, and the src of img tag is displayed like this:

<img src="[object Module]" alt="The Chrysalids">

Also, the path to image directory is './assets/images/'.

EDIT: Thank you all, the .default property solved the problem.