我无法在React中编写关闭模态窗口的代码。我不知道如何才能做到这一点，我需要在单击"添加"按钮时打开模态窗口，用户输入数据，然后单击"添加产品"按钮，窗口立即关闭
代码：

import React from 'react';
import CatalogProducts from "./CatalogProducts";
import Info from "./Info";
import CreateProduct from "./CreateProduct";
import {Button} from 'react-bootstrap';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import '../css/popup.css'

const Main = () => {

    return (
        <div>
            <div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
                <Popup contentStyle={{width: "unset", backgroundColor: "red", border: "none", background: "none"}}
                       trigger={<Button> Add </Button>} modal>
                    <CreateProduct/>
                </Popup>
                <input placeholder={'search'}/>
                <span>sort by</span>
                <input/>
            </div>
            <CatalogProducts></CatalogProducts>
            <Info></Info>
        </div>
    );

};

export default Main;

import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

const CreateProduct = () => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()
    
    function addProd() {
        dispatch(addProductAction(newProduct))
    }
    
    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add product</Button>
                </p>
            </div>
    );

};

export default CreateProduct;

我试着设置一个标志来改变组件类，但是没有成功