I'm trying to create a custom modal without any libraries. This modal displays the current users and depending on the amount of active users it can get very big. If the amount of elements in the modal go past the bottom of the screen I cant see the entire modal.

Ideally, I'd like to have the modal always be centered and contained within the screen and if there are too many elements then the user would be able to scroll down through the modal without moving the background. Any help is really appreciated!

this is what I've landed on so far but it's no where close to correct. The modal has no scroll capabilities and will get cut off by the screen if it gets too big:

const Modal: React.FC<IModalProps> = (props) => {
  

     if (!props.isOpen) {
       return null;
     }

  return (
    <>
         <ModalBackgroundStyled onClick={props.onCloseRequest}/>
            <ModalWrapper>
                {props?.users?.map(user=>{
                    return(
                        <NamePlate user={user}/>
                    );
                })}
            </ModalWrapper>
    </>
    )
};

export default Modal;

     const ModalBackgroundStyled = styled.div`
     background-color: rgba(255,255,255,0.5);
     backdrop-filter: blur(2px);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     height:200%;
     width:200%;
     display: flex;
     justify-content: center;
     align-items: center;
   `;

const ModalStyled = styled.div`

    display:flex;
    flex-direction: column;
    align-items:center;
    background: #E5E5E5;
    border-radius: 4px;
    overflow: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    min-width: 30rem;
    z-index: 2;
`;