у установить простое фоновое изображение с наложением на компонент реагирования из файла sass, но я получаю эту ошибку,Module not found: You attempted to import ../assets/hero.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.это очень странно, поскольку папка ресурсов, содержащая изображение, на самом деле находится внутри/src папка, вот моя структура папок

src/ 
  |assets/
          hero.jpg
  |sass/
        |main.scss
        |sassFiles/
                  |components.scss
                  |..
  |components/
             |Navbar.js
             |Home.js
             |..
  |App.js
  |index.js
  |..
             
         
  

/* _components.scss file */

.hero {
  height: 60vh;
  background: linear-gradient(rgba(238, 238, 238, 0.459)), url(../../assets/hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

когда я импортирую изображение из компонента, как такimport hero from '../assets/hero.jpg', он работает нормально, ошибка возникает только тогда, когда я импортирую его из файла .scss, кроме этого, стили применяются без проблем.