How to Create PopUp box in reactJs

import React from 'react';
import { useState } from 'react';
import('./home.css')
const Filter = () => {
    const [active, setActive] = useState(false);
    return (
        <>
            <div className={!active ? 'popup1' : 'popup'}>
                <div className="filterBtn m-4">
                    <button className='px-4 py-2 rounded' onClick={() => setActive(!active)}>Toggle</button>
                </div>
                <div className="overlay">
                    <div className="content">
                        <div className="close-btn" onClick={() => setActive(!active)}>&times;</div>
                        <h1 className='text-2xl font-bold'>title</h1>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non debitis officia neque nostrum, perspiciatis sed quaerat veritatis numquam, explicabo dolorum aliquam illo dolor at nemo maxime consequatur facilis magni laudantium! Ipsa eveniet quam, illum quos laudantium a placeat temporibus dolores libero pariatur quibusdam atque impedit magnam nam ipsum, rerum sapiente?</p>
                    </div>
                </div>
            </div>
        </>
    )
};
export default Filter;

.filterBtn button{
    background-color: rgb(69, 0, 134);
    color: white;
}
.filterBtn button:hover{
    background-color: rgb(96, 3, 182);
    
}
.popup1 .overlay{
    display: none;
}
.popup .overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background:rgba(0, 0, 0, 0.7);
    z-index: 1;
    /* display: none; */
}
.popup .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) ;
    background: #fff;
    width: 450px;
    height: fit-content;
    z-index: 2;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;    
}
.popup .close-btn{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height:30px;
    text-align:center;
    border-radius: 50%;
    cursor: pointer;
}
.popup:active .overlay{
    display: block;
}
.popup:active .content{
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
}