webpack 5 and mini-css-extract-plugin doesn’t load the css after saving the scss to css files

I have mini-css-extract-plugin that creates the css files from my scss files fine, but it when I load my pages (reactJs app), there are no styles loading. I suspect I am messing up the paths for output or import in some way, but I have tried many combinations unsuccessfully… The paths for import worked fine with the inline style-loader before.
webpack entry:

entry: {    
        index: './src/index.js',
    },
    output: {
        filename: '[name].js'
    },

webpack module:

module: {
        rules: [
        {
        test: /.(sass|less|css|scss)$/,
        sideEffects: true,
        use: [
          
           MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },          
        {
          test: /.js?$/,
          exclude: /node_modules/,              
          loader: 'babel-loader',          
          options:{
            presets: ['@babel/preset-react']
          }
        }

    ],          
  },

Webpack plugins:

plugins: [
        new MiniCssExtractPlugin({
          filename: "css/[name].css",
          chunkFilename: "css/[id].css",
        })
    ]

mainListing.js (which is one of the React routes inside of index.js):

import './css/index.scss'