Estoy tratando de crear un modal personalizado sin bibliotecas. Este modal muestra los usuarios actuales y, dependiendo de la cantidad de usuarios activos, puede ser muy grande. Si la cantidad de elementos en el modal supera la parte inferior de la pantalla, no puedo ver todo el modal.

Idealmente, me gustaría tener el modal siempre centrado y contenido dentro de la pantalla y si hay demasiados elementos, el usuario podría desplazarse hacia abajo a través del modal sin mover el fondo. ¡Cualquier ayuda es muy apreciada!

esto es en lo que he aterrizado hasta ahora, pero no está ni cerca de ser correcto. El modal no tiene capacidades de desplazamiento y la pantalla lo cortará si se vuelve demasiado grande:

 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; `;