How to use Sonner with Next.js pages router

[ollebergkvist]

_app.tsx

return (
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <PostHogProvider client={posthog}>
          <div className={`${figtree.variable} ${dmSerifText.variable}`}>
            <Component {...pageProps} />
            <Toaster />
          </div>
        </PostHogProvider>
      </Provider>
    </QueryClientProvider>
  )

As soon as this is deployed, I get a client-side exception.

I've tried to load Toaster dynamically with next/dynamic, and I've also tried to suppress the warning with suppressHydrationWarning.