react-lazyload with react-router-dom

Greetings,

I'm using react-router-dom and I'm trying to have lazyloading in my "gallery" page but when I visit the gallery page all the images are and lazyloading isn't working properly. I initially tried it without react-router-dom and it worked just fine. So I'm fairly sure the problem is with the routing.

`./App.js`
```
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Gallery from "./Gallery";
import Home from "./Home";

function App() {
return (


} />
} />


);
}
export default App;
```

`./Gallery.js`
```
import React from "react";
import "./App.css";

import Amplify, { Auth, Storage } from "aws-amplify";
import config from "./aws-exports";
import LazyLoad from "react-lazyload";

Amplify.configure(config);
const getCreds = async () => {
let creds = await Auth.currentCredentials();
console.log(creds.identityId);
};
getCreds();

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
images: []
};
}
async componentDidMount() {
await Storage.list("")
.then(res => {
res.shift(); //remove the first element of the array
res.map(imgObject => {
let lnk =
"LINK IM FETCHING FROM" + imgObject.key;
this.setState(prevState => ({
images: [...prevState.images, lnk]
}));

return imgObject;
});
})
.catch(err => console.log(err));
}

render() {
const items = this.state.images.map(imgLink => (



));
return

;
}
}

export default App;

```

Lazyloading works as intended when I remove `` and `` with the same code as `./Gallery.js`