How to use `useHistory()` correctly? I can't make the transition from one react component to another.
According to the instructions from the React documentation and also here on Stack Overflow, I cannot make the transition from App.js to MyComponent.js.

For example - I am trying

```
/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0

function App()
{
    let history = useHistory ();
    const handleClick = () => {
       history.push ('./pages/MyComponent');
    }    

    return (
       <div className="App">
          <button onClick={handleClick}>Next page ==></button>
       </div>
    );
}

```

I also tested this example, but the output throws the following error when the button is pressed:

> 
> TypeError: Cannot read property 'push' of undefined
> 
> 
> 

Does something seem to be leaking to me or is there a mistake on Babel's side?

Project react structure:

```
+ Root/
    + src/
        - App.js
        - index.js
        + pages/
            - MyComponent.js

```