Background image only shows up after reloading the page - reactjs

Question

I'm trying to import an image as I usually do on React and using that value as a background image for a styled component, the first page that renders seems to use the background fine, but then when navigating the application with Links from react-router it doesn't seem to load the background for any of the components inside the router. I have to reload each component to see the actual background.
import React from "react";
import MiningBackground from "assets/backgrounds/miningBackground.jpg";
import styled from "#emotion/styled";
const MiningPage = () => {
return <BackgroundContainer key="mining-background"></BackgroundContainer>;
};
const BackgroundContainer = styled.div`
background-image: url(${MiningBackground});
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
min-height: 100vh;
min-width: 100vw;
background-color: "#0A2836";
color: "#0A2836";
`;
export default MiningPage;
After further checking, it looks like the router is not returning the components at all, I'll attach the router and the navigation.
The Drawer:
import {
faHome,
faGem,
faCoins,
faSpaceShuttle,
} from "#fortawesome/free-solid-svg-icons";
import { Divider, Drawer, List, Toolbar, Typography } from "#material-ui/core";
import React from "react";
import AMenuItem from "components/atoms/AMenuItem";
import styled from "#emotion/styled";
import MadeByCommunityBlack from "assets/MadeByTheCommunity_Black.png";
const SideMenu: React.FC = () => {
return (
<StyledDrawer variant="permanent" open>
<div>
<Toolbar />
<StyledList>
<AMenuItem link="/" icon={faHome} text="Home" />
<AMenuItem link="/mining" icon={faGem} text="Mining" />
<AMenuItem link="/trading" icon={faCoins} text="Trading" />
<AMenuItem link="/fleet" icon={faSpaceShuttle} text="Fleet" />
<Divider />
</StyledList>
</div>
<TradeMarkContainer>
<StyledImage
src={MadeByCommunityBlack}
alt="Made by the star citizen community official logo"
/>
<Typography variant="caption">
Star Citizen®, Roberts Space Industries® and Cloud Imperium ® are
registered trademarks of Cloud Imperium Rights LLC.
</Typography>
</TradeMarkContainer>
</StyledDrawer>
);
};
const StyledDrawer = styled(Drawer)`
.MuiDrawer-paper {
z-index: 980;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 0px 10px 10px 10px;
width: 190px;
}
`;
const TradeMarkContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const StyledList = styled(List)`
background-color: "#0A2836";
`;
const StyledImage = styled.img`
width: 150px;
`;
export default SideMenu;
The Router:
import FleetPage from "components/pages/FleetPage";
import MiningPage from "components/pages/MiningPage";
import TradingPage from "components/pages/TradingPage";
import React from "react";
import { Route, Router, Switch } from "react-router-dom";
import HomePage from "../components/pages/HomePage";
import { createBrowserHistory } from "history";
import SideMenu from "components/organisms/SideMenu";
import TopBar from "components/organisms/TopBar";
const Routes = () => {
const history = createBrowserHistory();
return (
<Router history={history}>
<TopBar />
<SideMenu />
<Switch>
<Route path="/fleet" component={FleetPage} />
<Route path="/trading" component={TradingPage} />
<Route path="/mining" component={MiningPage} />
<Route path="/" component={HomePage} />
</Switch>
</Router>
);
};
export default Routes;

Answer 1

The issue was I was importing Router and not BrowserRouter from react-router-dom. Changing that and removing the history prop did the trick.