Button components use the default theme instead of the custom theme on initial render

[purplecandy]

The Button components are initializing with the default theme on the first render, ignoring the persisted theme from localStorage. This issue is unique to the Button components and does not affect other components.

Expected Behavior:
The Button components should apply the persisted theme (e.g., dark) immediately on the first render.

Actual Behavior:
On the first render, Button components use the default theme (e.g., light) even when the persisted theme is dark. The correct theme is only applied in follow-up re-renders.

Screen.Recording.2024-11-18.at.2.12.58.AM.mov

I have taken the example from the docs here. Interestingly, even if I have dark as the default theme it somehow infers the default theme from somewhere

function App() {

  return (
    <>
      <ThemeProvider
        defaultTheme="dark"
        storageKey="collector-dev-dashboard-theme">
        <ThemeWrapper
          defaultTheme="default"
          className="bg-background text-foreground">
          <MemoryRouter initialEntries={["/"]}>
            <Dashboard />
          </MemoryRouter>
        </ThemeWrapper>
      </ThemeProvider>
      <Toaster />
    </>
  )
}

Any help would be appreciated in trying to figure it out, thanks