Console warning when using Tabs

[Chukwu3meka]

SSR error occurs when using tabs component

 <Tabs defaultValue={theme}>
            <TabsList>
              <TabsTrigger value="light" className="cursor-pointer h-7" onClick={themeHandler("light")}>
                <FaSun size=".8em" />
              </TabsTrigger>
              <TabsTrigger value="dark" className="cursor-pointer h-7" onClick={themeHandler("dark")}>
                <FaMoon size=".7em" />
              </TabsTrigger>

              <TabsTrigger value="system" className="cursor-pointer h-7" onClick={themeHandler("system")}>
                <FaCloudSun size=".9em" />
              </TabsTrigger>
            </TabsList>
          </Tabs>

hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Primitive.div tabIndex={-1} data-orientation="horizontal" asChild={true} ref={function} style={{outline:"none"}} ...>
      <Slot tabIndex={-1} data-orientation="horizontal" style={{outline:"none"}} onMouseDown={function handleEvent} ...>
        <SlotClone tabIndex={-1} data-orientation="horizontal" style={{outline:"none"}} ...>
          <Primitive.div role="tablist" aria-orientation="horizontal" className="inline-fle..." ref={function} ...>
            <div role="tablist" aria-orientation="horizontal" className="inline-fle..." tabIndex={-1} ...>
              <_c2 value="light" className="cursor-poi..." onClick={function}>
                <TabsTrigger ref={null} className="inline-fle..." value="light" onClick={function}>
                  <RovingFocusGroupItem asChild={true} __scopeRovingFocusGroup={{...}} focusable={true} active={true}>
                    <RovingFocusGroupCollectionItemSlot scope={{...}} id="radix-:R1r..." focusable={true} active={true}>
                      <Slot data-radix-collection-item="" ref={function}>
                        <SlotClone data-radix-collection-item="" ref={function}>
                          <Primitive.span tabIndex={-1} data-orientation="horizontal" asChild={true} ref={function} ...>
                            <Slot tabIndex={-1} data-orientation="horizontal" onMouseDown={function handleEvent} ...>
                              <SlotClone tabIndex={-1} data-orientation="horizontal" onMouseDown={function handleEvent} ...>
                                <Primitive.button type="button" role="tab" aria-selected={true} ...>
                                  <button
                                    type="button"
                                    role="tab"
+                                   aria-selected={true}
-                                   aria-selected="false"
                                    aria-controls="radix-:Rblnql9l7:-content-light"
+                                   data-state="active"
-                                   data-state="inactive"
                                    data-disabled={undefined}
                                    disabled={false}
                                    id="radix-:Rblnql9l7:-trigger-light"
                                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md px..."
                                    onClick={function}
                                    onMouseDown={function}
                                    onKeyDown={function}
                                    onFocus={function}
                                    tabIndex={-1}
                                    data-orientation="horizontal"
                                    data-radix-collection-item=""
                                    ref={function}
                                  >
              ...

full code can be found here

[Chukwu3meka]

Issue already mentioned in the docs. All I had to do was to disable ssr.