I'm trying to filter the school using the same method used in the sample filter in Shadcn's Dashboard but the problem I'm encountering right now is, nothing is being fetched. This is the sample image.

Now, I tried using the filtered.

This is my column.tsx

export const columns: ColumnDef<Office>[] = [
  {
    accessorKey: 'school',
    header: 'School',
  
    cell: ({ row }) => (
      <div className="capitalize">{row.original.account.school}</div>
    ),

  },
]

SchoolTable.tsx

export function SchoolTable() {
  const [sorting, setSorting] = useState<SortingState>([])
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
    []
  )
  const [columnVisibility, setColumnVisibility] =
    useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = useState({})



  const schoolData = getSchoolTable()


  const table = useReactTable({
    data: schoolData.data || [],
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  })

  if (schoolData.isPending) return 'Loading...'

  if (schoolData.error) return 'An error has occurred: ' + schoolData.error.message

  return (
    <div className="w-full">
      <div className="flex items-center py-4">
        <Input
          placeholder="Filter emails..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("email")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />

        <DataTableFacetedFilter
          column={table.getColumn("school")}
          title="School Assigned"
          options={schools}
        />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="ml-auto">
              Filter   <ChevronDown />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {table
              .getAllColumns()
              .filter((column) => column.getCanHide())
              .map((column) => {
                return (
                  <DropdownMenuCheckboxItem
                    key={column.id}
                    className="capitalize"
                    checked={column.getIsVisible()}
                    onCheckedChange={(value) =>
                      column.toggleVisibility(!!value)
                    }
                  >
                    {column.id}
                  </DropdownMenuCheckboxItem>
                )
              })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}

Here is the query I created coming from tanstack query

export const getSchoolTable = () => useQuery({
    queryKey: ['schoolData'],
    queryFn: async () => {
        const res = await axios.get(`/api/school_table`)
        return res.data
    }
})

This is my api call.

export async function GET() {
  try {
    const data = await db.user.findMany({
      where: {
        AND: {
          affiliation: 'school',
          role: 'teacher',
          NOT: {
            account: null
          },
        }
      },
      select: {
        id: true,
        email: true,
        role: true,
        affiliation: true,
        school_assigned: true,  // explicitly selecting school_assigned
        account: true,  // this will include all Account fields
      }
    });
    
    return Response.json(data);
  } catch (error) {
    console.log(error);
    throw new Error("Data can't get.");
  }
}

schema.prisma

model User {
  id            String      @id @default(cuid())
  email         String      @unique
  password      String?
  emailVerified DateTime?
  image         String?
  role          Role        @default(teacher)
  affiliation   Affiliation @default(school)
  status        Status      @default(active)
  school_assigned String?
  createdAt     DateTime    @default(now())
  updateAt      DateTime    @updatedAt
  account       Account?
}

model Account {
  id               String  @id @default(cuid())
  first_name       String?
  middle_name      String?
  last_name        String?
  suffix           String?
  sex              String?
  email            String?
  position         String?
  position_other   String?
  classification   String?
  years_in_service String?

  section_or_unit      String?
  undergraduate_course String?
  date_graduated       String?
  doctorate_degree     String?
  master_degree        String?
  locked               Boolean @default(false)

  school          String?
  division_office String?

  account   User   @relation(fields: [accountId], references: [id])
  accountId String @unique

  certificates Certificates[]

  createdAt DateTime @default(now())
  updateAt  DateTime @default(now())

  @@unique([email])
}