Z-индекс и наложение при отображении причина ошибка не может использовать крючок ⇐ CSS

[Anonymous]

Как я могу нажать кнопку «Закрыть», тогда она может закрыть модальный. Я положил onclick в модальный пользовательский модальный block, затем он работает, но другие блоки не работают.
Я хочу, когда пользователь нажимает кнопку «Закрыть» или слой наложения, он закроется.
Расскажите, пожалуйста, почему я получаю эту ошибку.'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import modalImage from '../../assets/banner/banner-1.png';

const Modal = () => {
const [isOpen, setIsOpen] = useState(true);

return (
isOpen && (

className={`body-overlay ${isOpen ? 'active' : ''}`}
onClick={() => {
setIsOpen(false);
}}
>

{/* Modal */}



{
setIsOpen(false);
}}
>





Hot Deal!

Enjoy exclusive discounts only available for a limited
time.

console.log('Shop Now clicked')}
>
Shop Now










)
);
};

export default Modal;

< /code>
my css < /p>
.body-overlay {
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
overflow: hidden;
-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
visibility: hidden;
width: 100%;
cursor: crosshair;
z-index: 99;
}
.body-overlay.active {
opacity: 1;
visibility: visible;
}

.modal {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.custom-modal .modal-dialog {
max-width: 888px;
margin: auto;
top: 50%;
transform: translateY(-50%);
border-radius: 25px;
}

.custom-modal .modal-content {
border-radius: 25px;
border: 1px solid #bce3c9;
padding: 0;
position: relative;
background-color: #fff;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
animation: fadeIn 0.3s ease-in-out;
}

.custom-modal .modal-btn-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
background-color: #3bb77e;
color: #fff;
font-size: 24px;
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.8;
transition: opacity 0.3s;
z-index: 999;
}

.custom-modal .modal-btn-close:hover {
opacity: 1;
}

.modal-body {
padding: 20px;
}



Подробнее здесь: https://stackoverflow.com/questions/796 ... t-use-hook