Divider renders without styles in first time

[max10rogerio]

Description

I'm using nextjs with app router in latest version

When I use the divider component, the divider renders without styles on the loading page. After the page fully loads, the styles are applied.

On loading page

After load page complete

Full Example

2024-03-14.11-20-56.mp4

On codesandbox example, you need refresh refresh then you see a black line for a moment.

Link to Reproduction

https://codesandbox.io/p/devbox/infallible-mahavira-ffjqmc?workspaceId=339403a7-df20-4695-bad9-9676ec52a704

Steps to reproduce

No response

Chakra UI Version

2.8.2

Browser

Google Chrome 122.0.6261.112

Operating System

• macOS
• Windows
• Linux

Additional Information

I'm using WSL

Update 1:

When I set the borderColor in theme that's work fine.

// ./theme.ts
import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme({
  components: {
    Divider: {
      baseStyle: {
        borderColor: "gray.200",
      },
    },
  },
});

// providers.tsx
"use client";

import { CacheProvider } from "@chakra-ui/next-js";
import { PropsWithChildren } from "react";
import { ChakraProvider } from "@chakra-ui/react";

export const Providers = (props: PropsWithChildren) => {
  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>{props.children}</ChakraProvider>
    </CacheProvider>
  );
};