Losing hope with inertia js ssr with react (typescript) and laravel. Hydration mismatch error but technically there should not be any mismatch!

I am unable to figure out why these errors occur. Initially I was faced with the route not defined error. I think I have figured it out to some extent (still not have fixed it) but now I am facing the hydration mismatch error! The problem is this error still pops up if I replace everything with a simple div!

Here is the error:

Browser console error

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. 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

  <Inertia initialPage={{...}} initialComponent={function AboutUs} resolveComponent={function resolveComponent} ...>
    <AboutUs errors={{}} flash={{status:null}} ziggy={{url:"http:...", ...}} auth={{user:null, ...}}>
      <MainLayout>
        <MainFooter>
+         <div>

Now here is my MainLayout.tsx ( I have commented out code and put the rest under mounted to isolate the issue)

import MainFooter from "@/Components/MainFooter";
import MainNavigation from "@/Components/Navigation/MainNavigation";
import { ReactNode, useEffect, useState } from "react";
import { Toaster } from "sonner";

export default function MainLayout({ children }: { children: ReactNode }) {
    const [mounted, setMounted] = useState(false);
    useEffect(() => setMounted(true), []);

    return (
        <>
            {mounted && <MainNavigation />}
            {/* <main>{children}</main> */}
            {mounted && <Toaster richColors closeButton expand />}
            <MainFooter />
        </>
    );
}

Now here is my MainFooter.tsx

export default function MainFooter() {
    return <div>dasdsada</div>;
}

So I don't really understand how hydration mismatch can occur here? It should render the same client and server side?!

Here is my app.tsx

import './bootstrap';
import '../css/app.css';
import './echo';

import { createInertiaApp } from '@inertiajs/react'
import { createRoot, hydrateRoot } from 'react-dom/client'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({ el, App, props }) {
        if (props.initialPage.component.includes('ssr')) {
            hydrateRoot(el, <App {...props} />);
        } else {
            createRoot(el).render(<App {...props} />);
        }
    },
    progress: {
        color: '#4B5563',
    },
});

Here is my ssr.tsx

import { createInertiaApp } from "@inertiajs/react";
import createServer from "@inertiajs/react/server";
import ReactDOMServer from "react-dom/server";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { type RouteName, route } from 'ziggy-js';

createServer(
    (page) =>
        createInertiaApp({
            page,
            render: ReactDOMServer.renderToString,
            resolve: (name) =>
                resolvePageComponent(
                    `./Pages/${name}.tsx`,
                    import.meta.glob([
                        './Pages/**/*.ssr*/**/*.tsx',
                        './Pages/**/*.ssr.tsx',
                    ]),
                ),
            setup: ({ App, props }) => {
                /* eslint-disable */
                // @ts-expect-error
                global.route<RouteName> = (name, params, absolute) =>
                    route(name, params as any, absolute, {
                        // @ts-expect-error
                        ...props.initialPage.props.ziggy,
                        // @ts-expect-error
                        location: new URL(props.initialPage.props.ziggy.url),
                    });
                /* eslint-enable */
                return <App {...props} />;
            },
        }),
    { cluster: true },
);

I am truly unable to solve this issue. I have read all the forums on this issue! If anyone can give me valuable insight on how to solve this, it would be really helpful! Unless I put everything under the boolean value of the mounted state variable, I keep getting the hydration mismatch error!