useSuspenseQuery with Next.js app router

const ProjectGrid: React.FC<ProjectGridProps> = ({ allProjectsPromise }) => {
 

  const { data: projects } = useSuspenseQuery({
    queryKey: ["projects"],
    queryFn: () => allProjectsPromise,
  });

  

  const projectBoxes = Object.values(projects).map((project) => {
    return (
      <Suspense fallback={<LoadingAnimation />}>
        <div key={project.id} id={project.id} className="h-64">
          <ProjectBox projectId={project.id} />
        </div>
      </Suspense>
    );
  });

  return (
     {projects ? projectBoxes : null}
  );
};

return useQuery({
    ...getSingleProjectOptions(user, projectId),
    initialData: () => {
      const projects = queryClient.getQueryData(
        getAllProjectsOptions(user).queryKey
      );

      if (projects && projects[projectId]) {
        return projects[projectId];
      }
    },
  });