I'm having trouble passing React props to image background

Question

I have this function below, I'm trying to pass the props imageUrl, Which when I console.log it it has the values shown below. How can I pass it as background image so that it works? The background image below when rendered works fine, however I would like to replace "../../photos/hats.png" with my imageUrl props. How can I do this please?

image ../../photos/hats.png
Menu-item.jsx:7 image ../../photos/jackets
Menu-item.jsx:7 image ../../photos/shoes.png
Menu-item.jsx:7 image ../../photos/women.png
Menu-item.jsx:7 image ../../photos/men.png

const MenuItem = ({ title, imageUrl }) => {
  return (
    <div
      style={{ backgroundImage: `url(${require("../../photos/hats.png")})` }}
      className="menu-item"
    >
      {console.log("image", imageUrl)}
      <div className="content">
        <h1 className="title">{title}</h1>
        <span>SHOP NOW</span>
      </div>
     
    </div>
  );
};

Answer 1

All you just have to do is pass the imageUrl to the require function

const MenuItem = ({ title, imageUrl }) => {
  return (
    <div
      style={{ backgroundImage: `url(${require(imageUrl)})` }} // << see this line
      className="menu-item"
    >
      <div className="content">
        <h1 className="title">{title}</h1>
        <span>SHOP NOW</span>
      </div>
     
    </div>
  );
};