React Table: Edit cell data from flexRender function

Question

I'm using TanStack's React Table and trying to modify the data in a certain column before rendering & specifically do so with the flexRender function: flexRender(cell.column.columnDef.cell, cell.getContext()).

This is my object type:

name: String
Address: String
companies: [{companyName: String, companyAddress: String}]

So companies is an Array of Objects. When rendered in the table, it id displayed as [Object] for each object in the Array.

What I'm trying to achieve is displaying in the table only the company name - so I need to render Object[0] when the data is an Object, but can't seem to be able to edit the data within flexRender.

My code looks like this:

  const tableInstance = useReactTable({
    data,
    columns: personDefinition,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <main className="flex min-h-screen items-center justify-center p-5">
      <table>
        <thead>
          {tableInstance.getHeaderGroups().map((headerGroup) => {
            return (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <th colSpan={header.colSpan} key={header.id}>
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </th>
                  );
                })}
              </tr>
            );
          })}
        </thead>
        <tbody>
          {tableInstance.getRowModel().rows.map((row) => {
            return (
              <tr key={row.id}>
                {row.getVisibleCells().map((cell) => {
                  return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </main>
  );
};