Correctly typing render function using columns group in mantine-datatable library

Question

I'm using mantine-datatable, and I'm having trouble typing a specific case in Typescript, here is my code :

import { DataTable, DataTableColumnGroup } from "mantine-datatable";
import { Link } from "react-router-dom";

const List = () => {
  type City = {
    id: number;
    name: string;
    size: number;
    country: string;
    continent: string;
  };

  const cities: City[] = [
    { id: 1, name: "NY", size: 500, country: "US", continent: "AMERICA" },
    { id: 2, name: "Paris", size: 200, country: "FRANCE", continent: "EUROPE" },
    { id: 3, name: "LA", size: 300, country: "US", continent: "AMERICA" },
    { id: 4, name: "Tokyo", size: 50, country: "JAPAN", continent: "ASIA" },
  ];

  const columns: DataTableColumnGroup[] = [
    {
      id: "main_data",
      title: `MAIN DATA`,
      columns: [
        {
          accessor: "name",
          render: ({ id, name }) => <Link to={`/${id}`}>{name}</Link>,
        },
        { accessor: "size" },
      ],
    },
    {
      id: "other",
      title: `OTHER`,
      columns: [{ accessor: "country" }, { accessor: "continent" }],
    },
  ];

  return <DataTable groups={columns} records={cities} />;
};

export default List;

The {name} is highlighted red with this error:

TS2322: Type  unknown  is not assignable to type  ReactNode 
index.d.ts(1451, 9): The expected type comes from property  children  which is declared here on type
IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement>