当在react原生中打开modal时，我想要模糊backgorund

import React, { useState } from 'react';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开Modal</button>
      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>Modal内容</h2>
            <button onClick={closeModal}>关闭Modal</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置半透明背景色 */
  backdrop-filter: blur(5px); /* 设置背景模糊效果 */
  z-index: 999; /* 确保modal位于背景之上 */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}