Help on DataTable globalFilter

[chromaticmoe]

So basically I have a DataTable where I want to use globalFilter, to filter all my columns. I've properly defined my columns in the columns.tsx, but two of these columns is actually an array of string, in which these two columns will fetch from my prisma model that has fields, that is relational to my other models. I hope it's not confusing. Basically, the globalFilter works but whenever I try to type in the input component the columns of the two array of string I've mentioned previously, it cannot search any.

Here's my column.tsx:

"use client"

import { ColumnDef } from "@tanstack/react-table"

export type MediationColumn = {
  id: number
  violation: string
  complainants: string[]
  respondents: string[]
  dateFiled: string
  case?: string
}

export const columns: ColumnDef<MediationColumn>[] = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "complainants",
    header: "Complainant",
  },
  {
    accessorKey: "respondents",
    header: "Respondent",
  },
  {
    accessorKey: "violation",
    header: "Alleged Violation",
  },
  {
    accessorKey: "dateFiled",
    header: "Date Filed",
  },
]

Here's my page.tsx, where I'm displaying my client.tsx, where it contains the data fetched from my prisma model:

import { format } from "date-fns";

import prismadb from "@/lib/prismadb";

import { MediationClient } from "./components/client";
import { MediationColumn } from "./components/columns";

const MediationDivision = async () => {
    const complaints = await prismadb.complaint.findMany({
        include: {
            complainants: true,
            respondents: true,
        },
    });

    const formattedComplaints: MediationColumn[] = complaints.map((item) => ({
        id: item.id,
        complainants: item.complainants.map((complainant) => complainant.name),
        respondents: item.respondents.map((respondent) => respondent.name),
        violation: item.violation,
        dateFiled: format(item.dateFiled, "MMMM d, yyyy")
    }))

    return ( 
        <div className="flex-col">
            <div className="flex-1 space-y-4 p-8 pt-6">
                <MediationClient data={formattedComplaints}/>
            </div>
        </div>
     );
}
 
export default MediationDivision;

I've tried looking it up and did some experimentation but I can't get to anywhere. Need some help here. Thank you!