How do I fix this typescript error?

[Atman Atos]

Type 'T' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type 'T' is not assignable to type 'ReactPortal'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, propsts(2322)
index.d.ts(1414, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

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

separate file

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

separate file

import { Private } from "../components/auth/Private";
import { Profile } from "../components/auth/Profile";
import { Counter } from "../components/class/Counter";
import { List } from "../components/generics/List";
import { MutableRef } from "../components/ref/MutableRef";
import styles from "./styles.module.css";

const MoreHooks = () => {
  return (
    <div className={styles.main}>
      <MutableRef />
      <Counter message="kl" />
      <Private isLoggedIn={true} component={Profile} />
      <List items={[1, 2, 3]} handleClick={(item) => console.log(item)} />
      <List
        items={[
          {
            id: 1,
            first: "mk",
            last: "uid",
          },
          {
            id: 2,
            first: "mk",
            last: "uid",
          },
          {
            id: 3,
            first: "mk",
            last: "uid",
          },
        ]}
        handleClick={(item) => console.log(item)}
      />
    </div>
  );
};
export default MoreHooks;