Maximum update depth exceeded when used with router for authentication

[George Mickael Antony]

import { useState } from "react"
import { createContainer } from "unstated-next"
function useAuth() {
    let [auth, setAuth] = useState(0)
    let setAuthDetails = (auth) => setAuth(auth)
    return { auth, setAuthDetails }
}
let AuthContainer = createContainer(useAuth)
export default AuthContainer

import React from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";
import PrivateRoute from "./PrivateRoute"
import Login from "../pages/login/login"
import Home from "../pages/home/home"
import AuthContainer from '../containers/auth.container'

class ReactRouter extends React.Component {
    render() {
        return (
            <AuthContainer.Provider>
                <Router>
                    <Route exact path="/" component={Home} />
                    <PrivateRoute path="/login" component={Login} />
                </Router>
            </AuthContainer.Provider>
        )
    }
}

export default ReactRouter;

import { Route, Redirect } from "react-router-dom";
import React from "react";
import { useContainer } from "unstated-next"

import AuthContainer from "../containers/auth.container";

function PrivateRoute({ component: Component, ...rest }) {
    let authed = useContainer(AuthContainer)
    // let authed = true
    console.log(authed.auth)
    return (
        <Route
            {...rest}
            render={(props) => authed === true
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />}
        />
    )
}

export default PrivateRoute