Как вывести модальное окно на передний план?

Модальное окно отображается за другими элементами на страницe(красного цвета)

import React from "react";
import "./modal.css";

class Modal extends React.Component {
constructor(props) {
    super(props);
    
}

render() {
    const { active, setActive } = this.props; // Получаем active и setActive из props

    return (
        <div className={modal ${active ? 'active' : ''}}>
            <div className="modal-content">
                
            </div>
        </div>
    );
}
}

export default Modal;

.modal{
z-index: 4;
height: 100vh;
width: 100vh;
background-color: red;
}

Использовала z-index, но не помогло