i’m attempting to map over nested values and display each value in a seperate cell in my table. Right now all the values are displaying inside of one cell (as you would expect), but i can’t seem to tell the table to have a seperate cell for every value. Can someone help me out?

export const PurchaseOrderDialogColumns: ColumnDef<Product>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "variants",
    header: "Variant",
    cell: ({ row }) => {
      const { variants } = row.original;
      return variants?.map((variant) => variant.title);
    },
  },

I’ve tried flattening the array, and looking through the docs. Can’t find anything. Help would be greatly appreciated!