how can I do to display firstName and lastName for People and Invitees colums? Because for now I can display firstName for column People (i.e Eliot instead of Eliot Gray); for column Invitees-> firstName and lastName are attached together (i.e Paul Poel instead of PaulPoel) .

export default function Meeting() {
  ...
  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "People",
        accessor: (row) => row.people[0].firstName && row.people[0].lastName
      },
      {
        Header: "Invitees",
        accessor: (row) => row.invitees,
        Cell: (props) =>
          props.value !== [] && props.value.length > 0 ? (
            <div>
              {props.value !== []
                ? props.value
                    .map(({ firstName, lastName }) => firstName && lastName)
                    .join(", ")
                : ""}
              {props.value.length > 0 && (
                <CloseIcon
                  text={
                    props.value !== []
                      ? props.value.map((o) => (
                          <span key={o.firstName}>
                            <b>{o.firstName}</b>
                            <b>{o.lastName}</b>
                          </span>
                        ))
                      : ""
                  }
                />
              )}
            </div>
          ) : (
            ""
          )
      }
    ],
    []
  );

  return (
    <Table
      data={meeting}
      columns={data}          
    />
  );
}

My json :

{
  "meeting": [
    {
      "id": 1,
      "people": [
        {
          "firstName": "Eliot",
          "lastName": "Gray"
        },
        ...
      ],
      "invitees": [
        {
          "firstName": "Paul",
          "lastName": "Poel"
        },
        ...
      ]
    }
  ]
}