Фоновые изображения не отображаются в ReactJS интерфейсе материала

Question

Не получается, чтобы мое изображение отображалось как изображение героя. это работает, если я связываюсь с удаленной точкой, например: url(https://source.unsplash.com/random)

, но когда я переключаю его на импорт изображения, я получаю только цвет фона. Не знаю, где я ошибся, я новичок в использовании материала ui theme и CSS с JS. Код компилируется нормально, я просто получаю серый фон. журнал консоли возвращает "/static/media/string-bean.b584e82e.jpg"

import React from "react";
import HeroImage from "../../../img/string-bean.jpg";

// Mui
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Link from "@material-ui/core/Link";

console.log(HeroImage);

const useStyles = makeStyles((theme) => ({
  mainFeaturedPost: {
    position: "relative",
    backgroundColor: theme.palette.grey[800],
    color: theme.palette.common.white,
    marginBottom: theme.spacing(4),
    marginTop: theme.spacing(-3),
    backgroundImage: HeroImage,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
  },
  overlay: {
    position: "absolute",
    top: 0,
    bottom: 0,
    right: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,.3)",
  },
  mainFeaturedPostContent: {
    position: "relative",
    padding: theme.spacing(3),
    [theme.breakpoints.up("md")]: {
      padding: theme.spacing(6),
      paddingRight: 0,
    },
  },
}));

export default function Hero() {
  const classes = useStyles();

  return (
    <Paper
      className={classes.mainFeaturedPost}
      style={{ backgroundImage: HeroImage }}
    >
      {/* Increase the priority of the hero background image */}
      {<img style={{ display: "none" }} src={HeroImage} alt="TBD" />}
      <div className={classes.overlay} />
      <Grid container>
        <Grid item md={6}>
          <div className={classes.mainFeaturedPostContent}>
            <Typography
              component="h1"
              variant="h3"
              color="inherit"
              gutterBottom
            >
              A9 Nutrition
            </Typography>
            <Typography variant="h5" color="inherit" paragraph>
              Description of stuff
            </Typography>
            {/* <Link variant="subtitle1" href="#">
              Link to something?
            </Link> */}
          </div>
        </Grid>
      </Grid>
    </Paper>
  );
}

Не уверен, что мешает загрузке изображения.

Я изменял это шаблон блога

Макет папки: