How to re-render with query and useForm

import { PlanningTodo, Projet } from '@/utils/types/databaseTypes';
import { useAppQuery } from '@/utils/functions/Tanstack/queryClientHooks';
import { PROJECTS_QUERY_KEYS } from '@/utils/query-keys';
import { useSortedForm } from '@/context/SortedForm';
import { applyFilters } from '@/utils/functions/Tanstack/applyFilters';
import { PlanningTodoFilters } from '@/utils/functions/Tanstack/filters/PlanningTodoFilters';
import { useStore } from '@tanstack/react-form';

const api = {
  fetchProjectTODO: async (projet: Projet): Promise<PlanningTodo[]> => {
    if (!projet || !projet.pro_id) return [];

    const response = await fetch(`/api/planning/get_by_project_id?proId=${projet.pro_id}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || 'Failed to fetch project TODOs');
    }

    return response.json();
  },
};

export const useGetAllProjectTodo = (projet: Projet | null) => {
  const sortedForm = useSortedForm();
  const profile = useStore(sortedForm.store, state => state.values.profiles);

  return useAppQuery<PlanningTodo[]>({
    queryKey: [
      ...PROJECTS_QUERY_KEYS.list(),
      projet?.pro_id ?? 'no-project',
      profile ?? 'no-profile',
    ],
    queryFn: () => api.fetchProjectTODO(projet as Projet),
    enabled: !!projet?.pro_id,
    select: data => applyFilters(data, { profiles: profile }, PlanningTodoFilters),
  });
};