Как сделать всплывающую форму, в реагируешь?

---

https://i.stack.imgur.com/rJZMo.png

https://i.stack.imgur.com/X0pKF.png


Я пытаюсь сделать всплывающую форму в react ...

<div className="form-popup" id={"myForm"}>
    <Modal open={handleClose} onclose={handleShow} id={'content'}>
    
    <form react mailto='' className="form-container" >
    
     <label for="email">Email</label>
    <input type="text" placeholder={"Enter Email"} name={"email"} required />
    
    <label for={"name"}>Name</label>
    <input type={"text"} placeholder="Enter Name" name={"name"} required />
    
    <label for={"message"}>Message</label>
<textarea type="textarea" name={"message"} placeholder={"Your Message Here"} maxlength={"6000"} rows={"7"} required></textarea>
                    
    <button type="submit" className={"btn"}>Submit</button>
    <button type="submit" className={"btn cancel"} onclick={handleShow}>Close</button>
                    
   

    </form> 
       </Modal>
    
    <button className="open-button" onclick={handleShow}>Contact Me</button>  
    </div>

#содержание {
топ: 50%;
осталось: 50%;
справа: авто;
дно: авто;
маржа справа: -50%;
transform:translate(-50%, -50%);
}

/* контактная форма */

#contactbtn {
граница-радиус: 25px;
фон: зеленый;
курсор: указатель;
бордюр-цвет: красный;
коробке-тень: 0px 20 пикселей 20 ПКС -20 ПКС;
ширина: 90px;
высота: 35px;
положение: фиксированное;
белый цвет;
дно: 0 !важно;
правильно: 0 !важно;
justify-content: правильно !важно;
}

#btncancel {
курсор: указатель;
align-self: слева;
фон: черный;
белый цвет;
прокладка: 5px;
маржа: 10px;
поле слева: 98px;
дисплей: встроенный блок;
шрифт: 'Bree Serif', Georgia, serif;
}

.кнопка Open {
цвет фона: синий;
белый цвет;
прокладка: 16px 20px;
граница: отсутствует;
курсор: указатель;
непрозрачность: 0,8;
положение: фиксированное;
дно: 23px;
справа: 28px;
ширина: 280px;
margin-top: 95px;
границы-радиус: 5 пикселей 25 пикселей;
}

/* Всплывающая форма - скрыта по умолчанию */
.форма-всплывающее окно {
дисплей: true;
положение: фиксированное;
дно: 0;
справа: 15px;
граница: 3px solid #f1f1f1;
z-индекс: 9;
}

/* Добавление стилей в контейнер формы */
.форма-контейнер {
максимальная ширина: 300px;
обивка: значение 10px;
цвет фона: белый;
}

/* Поля ввода полной ширины */
.форма-контейнер вход[тип=текст],
.form-container input[type=password] {
ширина: 100%;
обивка: 15px;
маржа: 5px 0 22px 0;
граница: отсутствует;
Предыстория: #f1f1f1;
}

/* Когда входные данные получают фокус, сделайте что-нибудь */
.form-container input[type=text]:focus,
.form-container input[type=password]:фокус {
цвет фона: #ddd;
контур: нет;
}

/* Установите стиль для кнопки submit/login */
.форма-контейнер .БТН {
цвет фона: #4CAF50;
белый цвет;
прокладка: 16px 20px;
граница: отсутствует;
курсор: указатель;
ширина: 100%;
маржа-дно: 10px;
непрозрачность: 0,8;
}

/* Добавьте красный цвет фона к кнопке отмены */
.форма-контейнер .отменить {
цвет фона: красный;
}

/* Добавьте некоторые эффекты наведения на кнопки */
.форма-контейнер .БТН:наведите,
.открыть-кнопка:наведите курсор мыши {
непрозрачность: 1;
}


handleShow = () => setState(setShow => {
return { setShow: true }
});

handleClose = () => setState(setShow => {
return { setShow: false }
});



Что я уже пробовал:

I tried just about everything to make the code work

---