React -如何在子组件中更新父组件onclick中的状态-我做错了什么？

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [status, setStatus] = useState(false);

  const handleClick = () => {
    setStatus(!status);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Status: {status ? 'On' : 'Off'}</p>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>
      Update Parent Component Status
    </button>
  );
}

export default ChildComponent;