当按钮和函数位于不同的文件中时，如何在react.js中创建弹出窗口？

import Popup from './Popup';

import React, { useState } from 'react';

function Button() {
  const [showPopup, setShowPopup] = useState(false);

  const handleClick = () => {
    setShowPopup(true);
  };

  return (
    <div>
      <button onClick={handleClick}>点击按钮</button>
      {showPopup && <Popup />}
    </div>
  );
}

export default Button;

import React from 'react';

function Popup() {
  return (
    <div className="popup">
      <h1>弹出窗口</h1>
      <p>这是一个弹出窗口的内容。</p>
    </div>
  );
}

export default Popup;

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <h1>React.js应用程序</h1>
      <Button />
    </div>
  );
}

export default App;