I'm trying to render a modal window when a user clicks on a product to find out more details. I created a modal component that is hidden by default, and clicking on the product triggers a function that makes the modal visible and gives it the props of name, price of the product etc. However, I only get an empty modal.

Container:

const Product = ({ imgUrl, nameUrl, priceUrl, id }) => {
  const [title, setTitle] = useState("");
  const [productId, setProductId] = useState("");
  const [price, setPrice] = useState("");
  const [img, setImg] = useState("");
  const [modalClassName, setModalClassName] = useState("hidden");

  const renderModalProduct = () => {
    setTitle(nameUrl);
    setPrice(priceUrl);
    setImg(imgUrl);
    setModalClassName("visible");
  };

  return (
    <div className="product">
      <div className="img-container">
        <img src={imgUrl} alt="product image" onClick={renderModalProduct} />
      </div>
      <div className="product-description">
        <p>{nameUrl}</p>
        <p>€ {priceUrl}</p>
      </div>
      <div className="button-container">
        <AddShoppingCartIcon className="btn" data-tip="Add to cart" />
        <FavoriteBorderIcon className="btn" data-tip="Add to Favorites" />
        {/* <ZoomInIcon className="btn" /> */}
      </div>
      <ReactTooltip type="light" border="true" borderColor="grey" />
      <ModalProduct
        imgUrl={imgUrl}
        nameUrl={nameUrl}
        priceUrl={priceUrl}
        id={id}
        modalClassName={modalClassName}
      />
    </div>
  );
};

Modal Component:

const ModalProduct = ({ title, productId, price, img, modalClassName }) => {
  return (
    <div className={`${modalClassName} modal-product`}>
      <p>{title}</p>
      <img src={img} alt="" />
      <p>{price}</p>
    </div>
  );
};

Any ideas? Thank you!