react实现popup中间弹出内容点击遮罩层关闭

import React, { useState } from 'react'
import styles from './index.module.scss'
export default function PopupCnter() {
  const [state, setState] = useState(true)
  const handleClick = (e) => {
    setState(false)
  }
  return (
    <div>
      <div className={styles.root}>
        {/* 容器 */}
        <div
          className={`container ${state ? 'active' : ''}`}
          onClick={handleClick}
        >
          <div className="Popup" onClick={(e) => e.stopPropagation()}>
            <h2>React ni hao nihao nan a ! wohao nanshou a </h2>
          </div>
        </div>
      </div>
    </div>
  )
}

----------------------------css 部分----------------------------

.root {
  * {
    box-sizing: border-box;
  }
  :global {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    .container {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      justify-content: center;
      align-items: center;
      //   display: flex;
      display: none;
    }
    .container.active {
      display: flex;
    }
    .Popup {
      width: 400px;
      height: 200px;
      padding: 20px;
      background-color: white;
      border-radius: 6px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      position: relative;
    }
  }
}