ProductDetail.js

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

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

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

  const handleOpenPortal = () => {
    setIsOpenPortal(true);
  };

  return (
    <div className="product-container">
      ....
        <div className="product-button-container">
          <button className="add-to-basket-button" onClick={handleOpenPortal}>
            Sepete Ekle (Portal)
          </button>
          <button className="add-to-basket-button" onClick={handleOpen}>
            Sepete Ekle (Portalsız)
          </button>
        </div>
      </div>
      <ModalWithPortal
        isOpenPortal={isOpenPortal}
        setIsOpenPortal={setIsOpenPortal}
        productName={"Pubg"}
      />
      <ModalWithoutPortal
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        productName={"Pubg"}
      />
    </div>
  );
};

export default ProductDetail;