I'm constantly getting

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StaticGenerationSearchParamsBailoutProvider`.

in my nextjs app when I navigate through pages. What could be cause this?

Using dynamic imports here is my layout:

import dynamic from "next/dynamic";

export default dynamic(() => import("./async-layout"), {
  ssr: false,
});

export default function AsyncLayout({ children }: { children: ReactNode }) {
  const client = useClientStore();
  const chain = useChainStore();
  const balances = useBalancesStore();

  usePollBlockHeight();
  useObserveBalance();
  useNotifyTransactions();

  useEffect(() => {
    client.start();
  }, []);

  const loading = useMemo(
    () => client.loading || balances.loading,
    [client.loading, balances.loading],
  );

  return (
    <>
      <ThemeProvider
        attribute="class"
        defaultTheme="dark"
        enableSystem
        disableTransitionOnChange
      >
        <div className="absolute inset-0 border-t">
          <div className="absolute inset-0 bg-background">
            <div className="grid grid-cols-6">
              <Sidebar className="sticky top-0 col-span-1" />
              <main className=" col-start-2 col-end-7 overflow-hidden">
                <SearchBar></SearchBar>
                {children}
              </main>
              <Toaster />
            </div>
          </div>
        </div>
      </ThemeProvider>
    </>
  );
}