zustand state bound to suspense startTransition not working

[yss14]

Does anyone know whether there is a way to make zustand work together with reacts startTransition / useTransition if the state is bound to some Suspense boundary triggering logic like @tanstack/react-querys useSuspenseQuery?
Goal would be that the Suspense boundary is not triggered when clicking the button.

// page-store.ts
interface PageState {
  page: number;
  setPage: (page: number) => void;
  incrementPage: () => void;
}

export const usePageStore = create<PageState>()(
  persist(
    (set) => ({
      page: 1,
      setPage: (page) => startTransition(() => set({ page })),
      incrementPage: () =>
        startTransition(() => set((state) => ({ page: state.page + 1 }))),
    }),
    {
      name: "page-storage",
      storage: createJSONStorage(() => sessionStorage),
    }
  )
);

// App.tsx
const wait = async (timeout: number) => {
  await new Promise((resolve) => setTimeout(resolve, timeout));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<p>Loading...</p>}>
        <SuspendedDataLoading />
      </Suspense>
    </QueryClientProvider>
  );
}

const SuspendedDataLoading = () => {
  // this doesn't work
  const { page, incrementPage } = usePageStore();

  // this works!
  //const [page, setPage] = useState(1);
  //const incrementPage = () => setPage((p) => p + 1);

  const { data } = useSuspenseQuery({
    queryKey: ["data", page],
    queryFn: async () => {
      await wait(1000);

      return `Page ${page}`;
    },
  });

  const [isPending, startTransition] = useTransition();
  console.log({ isPending });

  const onClickNextPage = () => {
    startTransition(() => {
      incrementPage();
    });
  };

  return (
    <div>
      <h2>{data}</h2>
      <button onClick={onClickNextPage}>Next</button>
      <p>{`Page ${page}`}</p>
    </div>
  );
};

The full CodeSandbox can be found here.

Switching to useState works, so it seems like there is some extra logic running within zustand which "looses" the startTransition context?

[dai-shi]

Try: https://github.com/zustandjs/use-zustand

[yss14]

Thx, that works!