Nextjs solve hydrate error

nextjs_repair_hydrate_and_loading.tsx

import "bootstrap/dist/css/bootstrap.min.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import "../styles/template.css";
import "../styles/responsive.css";
import "../styles/styles.css";

import { wrapper } from "../redux/store";
import { AppProps } from "next/app";
import { useEffect, useState } from "react";
import { Loader } from "@/components/Loader";

import Router from "next/router";
import { Provider } from "react-redux";
import { Layout } from "@/components/Layout";

function App({ Component, ...rest }: AppProps) {
  const { store, props } = wrapper.useWrappedStore(rest);
  const [loading, setLoading] = useState(false);
  const [domLoaded, setDomLoaded] = useState(false);

  useEffect(() => {
    const start = () => {
      setLoading(true);
    };
    const end = () => {
      setLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  useEffect(() => {
    setDomLoaded(true);
  }, []);

  return (
    <>
      {loading ? (
        <Loader></Loader>
      ) : (
        domLoaded && (
          <Provider store={store}>
            <Layout>
              <Component {...props.pageProps} />
            </Layout>
          </Provider>
        )
      )}
    </>
  );
}

export default wrapper.withRedux(App);