Модальное окно не открывается в React ⇐ CSS

[Anonymous]

Я пытался создать модальное окно с помощью React, но оно не работает. Модальное окно не открывается, когда я нажимаю кнопку открытия. Я пытался найти эту проблему, но не получил никаких результатов.
Я использовал useState для управления внешним видом моего модального окна. Если это правда, результаты должны отображаться, иначе результаты не должны отображаться.
Я не знаю, в чем проблема в моем коде.

Это код модального компонента.
Modal.jsx:
import React, { useState } from "react";
import "./Modal.css";

export default function Modal() {
const [modal, setModal] = useState(false);

const toggleModal = () => {
setModal(!modal);
};

return (


Open Modal


{modal && (



Hello Modal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
perferendis suscipit officia recusandae, eveniet quaerat assumenda
id fugit, dignissimos maxime non natus placeat illo iusto!
Sapiente dolorum id maiores dolores? Illum pariatur possimus
quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
placeat tempora vitae enim incidunt porro fuga ea.


CLOSE



)}

);
}

Modal.css
body.active-modal {
overflow-y: hidden;
}

.btn-modal {
padding: 10px 20px;
display: block;
margin: 100px auto 0;
font-size: 18px;
}

.modal, .overlay {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
}

.overlay {
background: rgba(49,49,49,0.8);
}
.modal-content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1.4;
background: #f1f1f1;
padding: 14px 28px;
border-radius: 3px;
max-width: 600px;
min-width: 300px;
}

.close-modal {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 7px;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... g-in-react