I am using this starter template (https://github.com/vikpe/react-webpack-typescript-starter).

I'm also using react-bootstrap, and have a container with a backgroundImage.

const heroImage = require("./../assets/img/hero.png").default;

const styles = {
  hero: {
    height: "100vh",
    display: "flex", 
    justifyContent: "center",
    alignItems: "center",
    backgroundImage: "url(${heroImage})",
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat'
  },
  nav: {
    width: "100%"
  }
};

<Container fluid style={styles.hero}>
</Container>

I also print the image to make sure the link that returns shows me the image, which it does.

console.log(heroImage);

But for some reason, the image simply doesn't show. The background is blank with no errors.

What's going on here?

Thank you.