无法将对象数组从父组件传递到子组件

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

const ParentComponent = () => {
  // 定义一个对象数组的state
  const [data, setData] = useState([
    { id: 1, name: '对象1' },
    { id: 2, name: '对象2' },
    { id: 3, name: '对象3' },
  ]);

  return (
    <div>
      <h2>父组件</h2>
      {/* 将对象数组传递给子组件的props */}
      <ChildComponent data={data} />
    </div>
  );
};

export default ParentComponent;

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

const ChildComponent = ({ data }) => {
  return (
    <div>
      <h3>子组件</h3>
      {/* 遍历接收到的对象数组 */}
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default ChildComponent;