npm i modal-components

import Modal from 'modal-components';

const YourComponent = ({show, setShow}) => {
    return (

        {/* Modal display */}
        <Modal show={show} setShow={setShow} closeAnywhere={true} showIcon={true}>

            {/* Modal content */}
            <span> Modal customized text </span>

            {/* If you want to use your own close component use the prop showIcon={false} and add your component like here */}
            <button onClick={() => setShow(False)}>Close</button> 

        </Modal>
    )
}

import YourComponent from './YourComponent';

const App = () => {
    const [show, setShow] = useState(false);

    return (
        {/* Exemple of trigger */}
        <button onClick={() => setShow(true)}>
            Show modal
        </button>

        {/* Modal display */}
        <div>
            <YourComponent show={show} setShow={setShow} />
        </div>
    )
}