How to create a modal from a div from scratch in Reactjs using CSS?

#watercooler

I have tried finding this solution online which shows to use position absolute, top, left, bottom and right 0, and some background color which gives overlay kind of effect, but position absolute will not work for my case.
Please find my code snippet below:

The JSX:

        Add new birthday

The CSS:
.buttonContainer{
display: flex;
flex-direction: row;
}
For modal, using modalStyles.hidden and visible by toggling it through a useState
export const modalStyles = {
hidden: {
display: "none" /* Hidden by default /,
width: "100%" / Full width /,
height: "100%" / Full height /,
overflow: "auto" / Enable scroll if needed /,
backgroundColor: "rgb(0,0,0)" / Fallback color /,
backgroundColor: "rgba(0,0,0,0.4)" / Black w/ opacity */,
},
visible: {
display: "flex",
zIndex: 1,
background: "rgba(0, 0, 0, 0.3)",
},
};