Hello,

I've thrown together a Scrim component with Tailwind:

export const Scrim = ({
    visible = true,
    z_index = 9998,
    onClick,
    className = ""
}: ScrimProps
) => {
    return <div
        className={`fixed ${visible ? "pointer-events-auto" : "pointer-events-none"} ${visible ? "opacity-100" : "opacity-0"} transition-opacity top-0 left-0 w-full h-full bg-black/50 ${className}`}
        style={{zIndex: z_index}}
        onClick={onClick}
    >
    </div>;
}

And the only place it's used:

<Scrim
  visible={sidebar_visible}
  onClick={() => setSidebarVisible(false)}
/>

I'm experiencing at random when reloading the page (or sometimes because of HMR) that a strange hydration error occurs. Something client side is making these changes and I'm not sure why:

                              <div
                                className={"fixed pointer-events-none opacity-0 transition-opacity top-0 left-0 w-ful..."}
+                               style={{zIndex:9998}}
-                               style={{z-index:"9998"}}
                                onClick={function onClick}
                              >

I've disabled all my browser extensions and it still happens. Nothing should be accessing the Scrim component. I think if anything, this could be because I'm using ViewTransitions, but it just seems so weird to be inconsistent and to cause those changes specifically.

If there isn't something obvious I'm doing wrong then I'll happily file an issue on the repository, just sanity checking here first. Updating to the latest versions of next, react, and react-dom also haven't helped.

Cheers