Не удается загрузить фоновое изображение в React

Я новичок в реакции, и я пытаюсь установить фоновое изображение с помощью scss в реакции. Однако я получаю сообщение об ошибке в веб-пакете:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
 @ ./src/styles/styles.scss
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js

Ниже приведен файл конфигурации для веб-пакета:

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        },
        {
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
        }
    ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 8585,
        historyApiFallback: true
    }
};

Ниже приведен scss для того же:

.header-container{
    height: 85%;
    background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}

Я часами искал решение, но ничего не помогло.

Пожалуйста помоги. Заранее спасибо!