I am using web "webpack": "^5.74.0" in my React js project.

when i run npm start webpack throws following error

ERROR in ./src/layouts/SidebarLayout/Sidebar/SidebarMenu/items.ts 21:0-83
Module not found: Error: Can't resolve 'src/content/Login/LoginAuthentication' in 'E:\project\src\layouts\SidebarLayout\Sidebar\SidebarMenu'
 @ ./src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx 7:0-32 77:14-27
 @ ./src/layouts/SidebarLayout/Sidebar/index.tsx 10:0-40 40:32-43 56:34-45
 @ ./src/layouts/SidebarLayout/index.tsx 7:0-32 24:33-40
 @ ./src/router/PrivateRoute.tsx 11:0-53 135:29-42 148:29-42 167:29-42 234:29-42 259:29-42
 @ ./src/router/index.tsx 4:0-42 5:13-25
 @ ./src/App.tsx 5:0-30 17:33-39
 @ ./src/index.tsx 4:0-24 18:36-39

webpack throws this error wherever i import anything like this 'src/content/Login/LoginAuthentication'

no errors when i import like this '../../folder1/filename'

webpack config file is given blow:

const path =require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin')
const DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
module.exports={
    entry:path.resolve(__dirname,'..','./src/index.tsx'),
    resolve:{
        extensions:['.tsx','.ts','.js']
    },
    
    module:{
        rules:[{
            test:/\.(ts|js)x?$/,
            exclude:/node_modules/,
            use:[
                {
                    loader:'babel-loader'
                }
            ]
        },{
            test:/\.(sass|css|scss)$/,
            use:['style-loader','css-loader']
        }, {
            test: /\.(png|svg|jpg|jpeg|gif)/,
            type: 'asset/resource'
          },{
            test: /\.(png|svg|jpg|jpeg|gif)/,
            type: 'asset/inline'
          }
          
        //   ,{
        //     test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        //     exclude: /node_modules/,
        //     use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
        //   }
        
        ]
    },
    output:{
        path:path.resolve(__dirname,'..','./dist'),
        filename:'bundle.js'
    },
  
    plugins:[new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'..','./public/index.html')
    })
    ]
}

i there any ways to solve this? i can't change imports because there are too much of imports