Tuono hydration error

error.md

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

  ...
    <@mantine/core/MantineProvider theme={{...}} cssVariablesResolver={function resolver}>
      <@mantine/core/MantineThemeProvider theme={{...}}>
        <@mantine/CssVariables>
        <MantineClasses>
        <@mantine/core/AppShell layout="alt" header={{height:60}} navbar={{width:300, ...}}>
          <Provider value={{...}}>
            <AppShellMediaStyles>
            <@mantine/core/Box ref={null} className="m_89ab340 ..." style={{...}} mod={[...]}>
              <div ref={null} style={{...}} className="m_89ab340 ..." data-variant={undefined} data-size={undefined} ...>
                <Navbar toggle={function}>
                  <@mantine/core/AppShellHeader p="sm">
                    <@mantine/core/Box component="header" ref={null} mod={[...]} className="m_3b16f56b..." style={{}} ...>
                      <header ref={null} style={{...}} className="m_3b16f56b..." data-variant={undefined} ...>
                        <@mantine/core/Flex justify="space-between">
                          <@mantine/core/Box ref={null} className="m_8bffd616..." style={{...}}>
                            <div
                              ref={null}
                              style={{justifyContent:"space-between"}}
+                             className="m_8bffd616 mantine-Flex-root __m__-Rare"
-                             className="m_8bffd616 mantine-Flex-root __m__-R2mrh"
                              data-variant={undefined}
                              data-size={undefined}
                              size={undefined}
                            >
                              <@mantine/core/Button>
                              <@mantine/core/Box>
                              <@mantine/core/Flex align="center" gap={8}>
                                <@mantine/core/Box ref={null} className="m_8bffd616..." style={{gap:"calc(...", ...}}>
                                  <div
                                    ref={null}
                                    style={{gap:"calc(0.5re...",alignItems:"center"}}
+                                   className="m_8bffd616 mantine-Flex-root __m__-R3mqre"
-                                   className="m_8bffd616 mantine-Flex-root __m__-Rtmmrh"
                                    data-variant={undefined}
                                    data-size={undefined}
                                    size={undefined}
                                  >
                                    <NavbarActions>
                                      <@mantine/core/Flex gap={8}>
                                        <@mantine/core/Box ref={null} className="m_8bffd616..." style={{gap:"calc(..."}}>
                                          <div
                                            ref={null}
                                            style={{gap:"calc(0.5re..."}}
+                                           className="m_8bffd616 mantine-Flex-root __m__-Rdnmqre"
-                                           className="m_8bffd616 mantine-Flex-root __m__-R3dtmmrh"
                                            data-variant={undefined}
                                            data-size={undefined}
                                            size={undefined}
                                          >
                                    ...
                ...
                  <@mantine/core/Box component="nav" ref={null} mod={[...]} className="m_45252eee..." style={{}} p="md" ...>
                    <nav ref={null} style={{...}} className="m_45252eee..." data-variant={undefined} ...>
                      <SidebarHeader close={function}>
                        <@mantine/core/AppShellSection>
                          <@mantine/core/Box ref={null} mod={[...]} className="m_6dcfc7c7..." style={{}}>
                            <div ref={null} style={{}} className="m_6dcfc7c7..." data-variant={undefined} ...>
                              <@mantine/core/Flex mb={20} w="100%" justify="space-between">
                                <@mantine/core/Box ref={null} className="m_8bffd616..." style={{...}} mb={20} w="100%">
                                  <div
                                    ref={null}
                                    style={{justifyContent:"space-between",marginBottom:"calc(1.25r...",width:"100%"}}
+                                   className="m_8bffd616 mantine-Flex-root __m__-Rarbe"
-                                   className="m_8bffd616 mantine-Flex-root __m__-R2mqrh"
                                    data-variant={undefined}
                                    data-size={undefined}
                                    size={undefined}
                                  >
                                    <@mantine/core/Flex gap={10} align="center" w="auto" justify="center">
                                      <@mantine/core/Box ref={null} className="m_8bffd616..." ...>
                                        <div
                                          ref={null}
                                          style={{gap:"calc(0.625...",alignItems:"center",justifyContent:"center",width:"auto"}}
+                                         className="m_8bffd616 mantine-Flex-root __m__-R1mqrbe"
-                                         className="m_8bffd616 mantine-Flex-root __m__-Rdmmqrh"
                                          data-variant={undefined}
                                          data-size={undefined}
                                          size={undefined}
                                        >
                                    ...
                      ...
                ...