PrivateRoute in React causing auto-close on change with material-ui popover

I am trying to create a project with a todo list part. For this I am using a material-ui popover with a material-ui list component nested in it. Since the main page of the app should be protected I am also using a private route for this purpose.

Here is an example of the desired behavior of the todo component: Demo

However in my project, whenever I check or uncheck one of the todos, the popover auto-closes. When I open it again, I can see that the changes has been made in the UI (e.g. box is checked, text strike is made), as you can see in the simplified version of the project.

I could find out that it has to with the PrivateRoute component, but I do not exactly know why.

When I rewrite the code like this the todo component works as expected:

render() {
return (
  <BrowserRouter>
    <Switch>
      <Route
        path="/"
        exact
        render={() => (
          <Todos todos={this.state.todos} handleCheck={this.handleCheck} />
        )}
      />
      <Route path="/login" exact component={Login} />
    </Switch>
  </BrowserRouter>
)}

I am not really sure what the difference here is and what the reasoning behind each behavior is and would really appreciate your thoughts on this one!