Custom <NoSsr /> component, to move away from MUI

src/_shared/NoSsr.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+interface NoSSRProps {
+  /** The content to render on client. */
+  children?: React.JSX.Element | React.JSX.Element[]
+  /** Optional content to show before the component renders on client. This renders during server-side rendering (SSR). */
+  onSSR?: React.FC
+}
+
+const EmptySpan = () => <span />
+
+export const NoSsr = (props: NoSSRProps) => {
+  const { onSSR = EmptySpan, children = <EmptySpan /> } = props
+
+  const [isMounted, setIsMounted] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+    return () => {
+      setIsMounted(false)
+    }
+  })
+
+  return isMounted ? <>{children}</> : onSSR({})
+}

src/gAnalytics.tsx

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/material'
+import { NoSsr } from 'src/_shared/NoSsr'
 
 const GA_ID = 'UA-84279342-7'