我的按钮无法更改另一个react本机组件中的状态

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

function ParentComponent() {
  const [childComponentState, setChildComponentState] = useState(false);

  const handleButtonClick = () => {
    setChildComponentState(!childComponentState);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>更改子组件状态</button>
      <ChildComponent childState={childComponentState} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
  const { childState } = props;

  return (
    <div>
      <p>子组件状态：{childState ? '开启' : '关闭'}</p>
    </div>
  );
}

export default ChildComponent;