老师,关于弹窗组件的实现，除了您给出的两种方案, 可以用下面例子的方法实现吗？如果可以的话各有什么优缺点？

import React, { useState } from 'react';

// 弹窗组件
function Modal({ isOpen, closeModal, userData, setUserData }) {
  if (!isOpen) {
    return null;
  }

  const handleChange = (event) => {
    setUserData({ ...userData, [event.target.name]: event.target.value });
  };

  return (
    <div>
      <h2>编辑用户信息</h2>
      <form>
        <label>
          用户名：
          <input name="username" value={userData.username} onChange={handleChange} />
        </label>
        <label>
          邮箱：
          <input name="email" value={userData.email} onChange={handleChange} />
        </label>
      </form>
      <button onClick={closeModal}>关闭</button>
    </div>
  );
}

// 用户管理页面
function UserManagement() {
  const [modalOpen, setModalOpen] = useState(false);
  const [userData, setUserData] = useState({ username: '', email: '' });

  const openModal = (user) => {
    setUserData(user);
    setModalOpen(true);
  };

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

  const users = [
    // 用户数据
  ];

  return (
    <div>
      <h1>用户管理</h1>
      {users.map(user => (
        <div key={user.id}>
          <h2>{user.username}</h2>
          <button onClick={() => openModal(user)}>编辑</button>
        </div>
      ))}
      <Modal isOpen={modalOpen} closeModal={closeModal} userData={userData} setUserData={setUserData} />
    </div>
  );
}

export default UserManagement;