Reactjs рендеринг дважды

В моем проекте reactjs компонент отображается дважды. если я удалю componentDidMount, проблема будет решена. Но мне это нужно в моем проекте. Я пробовал решения в Интернете, но не смог.

App.js

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }
  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
      .then(res => res.json())
      .then(result => {
        this.setState({
          users: result.data
        });
      });
  }

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path = "/" render = {() => <Home />} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Home.js

export default class Home extends Component {
  render() {
    console.info("Render");
    return (
      <div>
        <h1>console.info render twice</h1>
      </div>
    );
  }
}

https://codesandbox.io/s/wyjk931z6l

console.info работает с Home.js дважды.