如何将状态从一个按钮传递到另一个组件

import React, { useState } from 'react';

function ParentComponent() {
  const [buttonState, setButtonState] = useState(false);

  return (
    <div>
      <ChildComponent buttonState={buttonState} setButtonState={setButtonState} />
    </div>
  );
}

function ParentComponent() {
  const [buttonState, setButtonState] = useState(false);

  const handleButtonClick = () => {
    setButtonState(!buttonState);
  };

  return (
    <div>
      <ChildComponent buttonState={buttonState} setButtonState={setButtonState} />
      <button onClick={handleButtonClick}>Toggle Button State</button>
    </div>
  );
}

function ParentComponent() {
  // ...

  return (
    <div>
      <ChildComponent buttonState={buttonState} setButtonState={setButtonState} />
      <button onClick={handleButtonClick}>Toggle Button State</button>
    </div>
  );
}

function ChildComponent(props) {
  const { buttonState, setButtonState } = props;

  const handleButtonClick = () => {
    setButtonState(!buttonState);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Toggle Button State</button>
      <p>Button State: {buttonState ? 'On' : 'Off'}</p>
    </div>
  );
}