Unhandled Runtime Error , Error: Text content does not match server-rendered HTML.

[talpx0]

const { theme } = useTheme();
    const bgImgProps:BgImgStateProps = {
        bgImgDegree: "45deg",
        colorStops: [
            { color: "#2b2e4a", percent: "0%" },
            { color: "#c4caef", percent: "50%" }
        ]
    }
    const darkBgImgProps: BgImgStateProps = {
        bgImgDegree: "90deg",
        colorStops: [
          { color: "#463f3a", percent: "0%" }, 
          { color: "#2b2e4a", percent: "50%" } 
        ]
    };
    const glassEffectProps = {
        bgTransparent: 0.5,
        blur: "5px",
        glassBgColor: "rgb(255, 255, 255)",
    }
    const initialState = theme === "dark" ? darkBgImgProps : bgImgProps;
    const [bgImgState, imgDispatch] = useReducer(bgImgReducer, initialState)

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I know why this will happen , I just can't find a way to fix it , I can't use classname inject the css directly , cause I have lots of update on the props

[Batouq]

if you go to https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch you will find your solution