I have created a modal component

I have created a modal component in React:

const ModalDialog: React.FC = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<>
<div
className={modal fade ${isOpen ? 'show d-block' : ''}}
tabIndex={-1}
role=”dialog”
aria-labelledby=”exampleModalCenterTitle”
aria-hidden=”true”
>

<div className=”modal-dialog modal-dialog-centered” role=”document” style={{ width: ‘700px’, maxWidth: ‘700px’ }} >

UPLOAD REQUIREMENT

×

…some content

Submit

</>
);
};

i am using this component inside a page

I have installed bootstrap as well
Import bootstrap wherever needed
Added CDN links to check whether would it work or not

I excepted this modal to open as smoothly as displayed in bootstrap documentation
https://getbootstrap.com/docs/4.0/components/modal
but it opens but too fast I don’t know why