React.js TypeScript (Generics) - Type 'T' is not assignable to type 'ReactNode'

I have code a List component (List.tsx) to show items, like following:

type PersonInGeneric = {
  id: number;
  first: string;
  last: string;
};

type ListProps<T> = {
  items: T[];
  onClick: (value: T) => void
};

export const List = <T extends PersonInGeneric>({ 
  items, 
  onClick, 
}: ListProps<T>) => {
  return(
    <>
      <h2>List of items</h2>
      {items.map((item, index) => {
        return(
          <div key={item.id} onClick={() => onClick(item)}>
            {item}
          </div>
        );
      })}
    </>
  );
}

And this is how I implement it in App.tsx (no error here) :

<List
        items={[
          {
            id: 1,
            first: 'Kai',
            last: 'Doe',
          }
        ]}
        onClick={item => console.log(item)}
/>

However, there is an error in List.tsx and if I hover on {item} it says :

" Type 'T' is not assignable to type 'ReactNode'. Type 'PersonInGeneric' is not assignable to type 'ReactNode'. Type 'T' is not assignable to type 'ReactPortal'. Type 'PersonInGeneric' is missing the following properties from type 'ReactPortal': key, children, type, propsts "

What is wrong with List.tsx? Thanks in advance.