I'm trying to send an image as a prop from

import React from "react";
import "./home.css";
import Product from "./Product";

function Home() {
  return (
    <div className="home">
      <div className="home-container">
        <img
          className="home-image"
          src={require("./nathan-oakley-gj1dnc7yRG0-unsplash.jpg")}
          alt=""
        />
        <div className="home-row">
          <Product
            title="Sofa Couch"
            price={5000}
            image={"./phillip-goldsberry-fZuleEfeA1Q-unsplash.jpg"}
            rating={5}
          />
          <Product />
        </div>

        <div className="home-row">
          <Product />
          <Product />
          <Product />
        </div>

        <div className="home-row">
          <Product />
          <Product />
        </div>
      </div>
    </div>
  );
}

export default Home;

in the home-row class to

import React from "react";
import "./product.css";

function Product({ title, image, price, rating }) {
  return (
    <div className="product">
      <div className="product-info">
        <p>{title}</p>
        <p>
          <small>$</small>
          <strong>{price}</strong>
        </p>
        <div className="product-rating">
          {Array(rating)
            .fill()
            .map((_, i) => (
              <p>*</p>
            ))}
        </div>
      </div>
      <img src={require(`${image}`)} alt="" />
      <button>Add to Basket</button>
    </div>
  );
}

export default Product;

this file. But the image is not showing. Even if I remove require it doesn't show up. Earlier I was using a local image and it was working with require. But this doesn't.

When I inspect it with console, it says uncaught error, cannot find module 'image name'.