How to make multiple variations of array data for a component ( tsx )?

Question

typescript

Hello everyone, this is the situation: I have a component DefaultItemsLayout, I want it to accept a prop, this prop should be an array consisting of objects, the fact is that I have three types of different objects, then I can transfer one of the three arrays to the prop in which there will be objects of different types, something like this

<DefaultItemsLayout items={arrayWithObjects1} /> или <DefaultItemsLayout items={arrayWithObjects2} /> или <DefaultItemsLayout items={arrayWithObjects3} />

, how can I make it so that the TS understands what Spanish is now. object so that I would be able to reach the fields of the object (so that the TS understands what object is being transmitted now and understands what fields it has)?
Component code :

import DefaultCardLayot from "../DefaultCardLayout/DefaultCardLayout";
import { IReminds } from "../../../models/IReminds";
interface IDefaultItemsLayout { // тут можно добавить <T> как я полагаю
  items: Array<any>; 
}
export default function DefaultItemsLayout(props: IDefaultItemsLayout) {
  const { items } = props; // items - массив из обьектов ( обьекты могут быть разными ) 
  return (
    <Box>
      {items.map((item) => {
        return (
          <>
            <div>{item.title}</div> // item должен понимать какие у него есть поля 
            <DefaultCardLayot />
          </>
        );
      })}
    </Box>
  );
}

Thank you !

Answer 1

interface IDefaultItemsLayout<T> {
  items: T[];
}

export default function DefaultItemsLayout<T>(
    props: React.PropsWithChildren<IDefaultItemsLayout<T>>
) { ... }