我正在使用Next.js类型脚本和UI材料我创建了MyOrders组件我希望将MyOrders数据传递给MyorderItem我无法将数据传递给MyOrderItem
下面我的代码不工作。我得到了一个错误。应该在哪里改变我的代码？

import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/system';
import MyOrderItem from './MyOrderItem';

const orders: MyOrderItemsData[] = [
  {
    orderId: '81318551 - 0003',
    productName: 'React Exports Performance Headset',
    productThumbnail: '../src/assets/images/product-2.png',
    productDescription: 'Color Black RGB, 270gr',
    sallerName: 'nicolayritz1337',
    deliveryTime: 'February 14',
    price: '$199.99',
    quantity: 1,
  },
  {
    orderId: '81318551 - 0002',
    productName: 'React Esports Perforrmance Heaadset',
    productThumbnail: '../src/assets/images/product-2.png',
    productDescription: 'Colour Black RGB, 270gr',
    sallerName: 'nicolayritz1337',
    deliveryTime: 'February 14',
    price: '$109.00',
    quantity: 1,
  },
  {
    orderId: '81318551 - 0001',
    productName: 'Gaming Headset Krraken X USB',
    productThumbnail: '../src/assets/images/product-2.png',
    productDescription: 'Colour Black, 240gr',
    sallerName: 'nicolayritz1337',
    deliveryTime: 'February 14',
    price: '$79.00',
    quantity: 1,
  },
];
const MyOrders: React.FC = () => (
  <Box>
    {orders.map((order, index) => (
      <MyOrderItem
      key={order.orderId} 
      index={index} 
      order={order}
      />
    ))}
  </Box>
);
export default MyOrders;

这是MyOrderItem组件

import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/material';
import { FC, useId } from 'react';

interface Props {
  product: MyOrderItemsData;
}

const MyOrderItem: FC<Props>= () => {
  
  return (
    <Box>
      <h1>OPI</h1>
    </Box>
    );
};

export default MyOrderItem;

我尝试了很多从MyOrder传递数据的方法，但是都无法解决。我不明白我的代码哪里错了。