React:如何使子组件在父组件更改时从数组中呈现？

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState(['item1', 'item2', 'item3']);

  const handleDataChange = () => {
    // 在这里更改父组件的数据
    setData(['item4', 'item5', 'item6']);
  };

  return (
    <div>
      <button onClick={handleDataChange}>更改数据</button>
      <ChildComponent data={data} />
    </div>
  );
}

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

  return (
    <div>
      {data.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

export default ParentComponent;