如何在React with Typescript中循环两个界面属性的并集

interface CombinedProps {
  prop1: string;
  prop2: number;
  prop3: boolean;
  // 添加其他属性...
}

const MyComponent: React.FC<CombinedProps> = ({ prop1, prop2, prop3 }) => {
  // 组件逻辑...
  return (
    <div>
      <p>{prop1}</p>
      <p>{prop2}</p>
      <p>{prop3}</p>
    </div>
  );
};

const ParentComponent: React.FC = () => {
  const prop1Value = "Hello";
  const prop2Value = 123;
  const prop3Value = true;

  return <MyComponent prop1={prop1Value} prop2={prop2Value} prop3={prop3Value} />;
};

const ParentComponent: React.FC = () => {
  const prop1Values = ["Hello", "World"];
  const prop2Values = [123, 456];
  const prop3Values = [true, false];

  return (
    <div>
      {prop1Values.map((prop1, index) => (
        <MyComponent
          key={index}
          prop1={prop1}
          prop2={prop2Values[index]}
          prop3={prop3Values[index]}
        />
      ))}
    </div>
  );
};