I am using a component to resolve id to its name inside a column cell of tanstack table. I am using tanstack query to resolve the id to name. I can render it but cannot implement a filter on the value because of its async nature.

This is how I am using the tanstack table and initializing it

const columns = useMemo<ColumnDef<ICustomModel>[]>(
    () => [
     
      {
        accessorKey: 'id',
        header: 'ID',
        cell: ({row}) =>  <IdToNameResolver id={row.original.id}/>
      },
      
    ],
    []
  );

My filter

 <Input
      value={(columnFilterValue ?? '') as string}
      onChange={(e) => column.setFilterValue(e.target.value)}
      placeholder={`Search...`}
      inputProps={{ 'aria-label': 'search' }}
    />

My resolver

interface IdToNameResolverProps extends CommonResolverProps {
    children?: (data: ICustomModel | undefined) => React.ReactNode;
}

const IdToNameResolver: React.FC<IdToNameResolverProps> = ({
    id,
    contextInfo,
    cacheOptions = 'force-cache',
    cacheKey = 'customData',
    nextConfig = undefined,
    useRouteHandler = true,
    isLoadingComponent = <CircularProgress />,
    errorComponent ,
    children,
}) => {
    const { data, isLoading, error } = useQuery<ICustomModel>({
        queryKey: [cacheKey, id],
        queryFn: () => MyService.getBill(id,
            contextInfo,
            cacheOptions,
            nextConfig,
            useRouteHandler),
    });

    if (isLoading) {
        return <>{isLoadingComponent}</>;
    }

    if (error && errorComponent) {
        return <>{errorComponent(error)}</>;
    }

    if (!children) {
        return <>{data?.name}</>;
    }

    return <>{children(data)}</>;
};

export default IdToNameResolver;

But my tanstack table filter dont work. How to make it work?