Why my React component rendering multiple times

I'm trying to add protected routes in App.js for authenticated users but the react element is getting rendered multiple times. Below is my App.js code

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUser: null,
      isAuthenticated: false,
      isLoading: false
    }
  }
  async loadCurrentUser() {
    this.setState({
      isLoading: true
    });
    await getCurrentUser()
      .then(response => {
        this.setState({
          currentUser: response,
          isAuthenticated: true,
          isLoading: false
        });
      }).catch(error => {
        this.setState({
          isLoading: false
        });
      });
  }
  async componentDidMount() { await this.loadCurrentUser(); } render() {
    return (
      <BrowserRouter>
        <React.Suspense fallback={loading}>
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <ProtectedRoute path="/" name="Home" authenticated={this.state.isAuthenticated}
              component={TheLayout} handleLogout={this.handleLogout}></ProtectedRoute>
          </Switch>
        </React.Suspense>
      </BrowserRouter>
    );

  }
}