Material UI showing Half white screen

Question

I am busy with a React website that Uses Material UI, Everything on Local seems to be working fine but its only when I push to a production server do things fail. If I go to the site "https://wheremysiteis.com" it should redirect the user to the login page, which seems to break and looks like this after redirecton:

If I go to "https://wheremysiteis.com/login" the site seems to load perfectly normal with no issues. The same issue happens if I send a user a password reset link that goes to "https://wheremysiteis.com/ForgotPassword/{id}" The page seems to break:

I have reason to believe it is a redirect issue, here is my code for the routing. I am using React Router v6

const authService = new AuthService();
export const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const setUser = useSetRecoilState(UserAtom);
  const history = useNavigate();
  const location = useLocation();
  // Set token upon application open
  Interceptors.setupTokenInterceptor();
  Interceptors.setupUnauthorizedInterceptor(axiosInstance, history);
  useEffect(() => {
    if (!location.pathname.includes('/ForgotPassword')){
      setLoading(true);
      authService.UserInfo();
      authService.getAccountDetails().then(result => {
        if (result.isSuccess){
          setUser(result.value);
        }
      })
      authService.Csfr().then(result => {
        const cookies = new Cookies();
        var ExistingToken = localStorage.getItem('__RequestVerificationToken');
        if (ExistingToken) {
          localStorage.removeItem('__RequestVerificationToken');
          localStorage.removeItem('__formtoken');
          localStorage.setItem('__RequestVerificationToken', result.value.CookieToken);
          localStorage.setItem('__formtoken', result.value.FormToken);
        } else {
          localStorage.setItem('__RequestVerificationToken', result.value.CookieToken);
          localStorage.setItem('__formtoken', result.value.FormToken);
        }
        cookies.remove('__RequestVerificationToken');
        cookies.remove('__formtoken');
        setLoading(false);
      }).catch(error => { console.error(error) });
    }

  }, []) // eslint-disable-line react-hooks/exhaustive-deps
  return (
    <div>
      {loading ? <IntermediateGlobalLoading /> :
        <div>
          <Routes>
            <Route path={login} element={<LoginPage />} />
            <Route path='/ForgotPassword/:id' element={<ForgotPasswordPage />} />
          </Routes>
          <Routes>
            <Route path='/*' element={<Dashboard />} />
          </Routes>
        </div>
      }
    </div>
  );
}

The only console errors I do find on the production site is this: