ProductDetail.js

import "../styles/productDetail.css";
import { useState } from "react";
import Modal from "./Modal";

const ProductDetail = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  return (
    <div className="product-container">
        ....
        <div className="product-button-container">
          <button className="add-to-basket-button" onClick={handleOpenPortal}>
            Sepete Ekle 
          </button>
        </div>
      </div>
      <Modal isOpen={isOpen} setIsOpen={setIsOpen} />
    </div>
  );
};

export default ProductDetail;