How can I set the filter value on a specific column?

Question

I am creating a table using Tanstack React Table V8 and I am having an issue trying to set the filter value of a specific column.

In this column I have the profile picture row.row.original.userProfilePicture and then the first and last name {row.row.original.userFirstName} {row.row.original.userLastName}

I have global filtering set and I would like to be able to search by first/last name. Currently it is not working because I believe the filter value may be set to the userProfilePicture.

I see in the docs there is a 'setFilterValue' but it is unclear to me how to implement this.

columnHelper.accessor('user', {
  header: () => (
    <td className="px-[1.30rem]">
      <div className="flex flex-row items-center font-normal">
        <ClientIcon />
        <p className="ml-2">Client</p>
      </div>
    </td>
  ),
  cell: row => (
    <div className="flex gap-4">
      <div className="h-6 w-6 md:h-8 md:w-8">
        <img
          src={row.row.original.userProfilePicture}
          className="rounded-full"
          alt="UserImage"
        />
      </div>
      <p className="font-switzer grid place-items-center text-base font-normal">
        {row.row.original.userFirstName} {row.row.original.userLastName}
      </p>
    </div>
  ),

  sortingFn: (rowA, rowB) => {
    const numA = rowA.original.userFirstName
    const numB = rowB.original.userFirstName

    return numA < numB ? 1 : numA > numB ? -1 : 0
  },
  size:
    window.innerWidth < 1536
      ? Math.round((window.innerWidth - 112) * 0.16)
      : Math.round((window.innerWidth - 255) * 0.16),

})

I tried implementing the setFilterValue function but I cannot get it to work