Как переместить css-in-js (стилизованные компоненты) во внешние файлы css во время сборки с помощью веб-пакета - ReactJS

Я пытаюсь выяснить, где находятся файлы CSS, когда я создаю проект реагирования. Я использую webpack и могу создать один файл CSS для всех стилей, используемых в проекте, если я использую обычный CSS. Когда я использую CSS в js, используя стилизованный компонент, я не получаю внешний файл CSS.

webpack.config.js

var path    = require('path');
var hwp     = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'index.js',
        path: path.join(__dirname, './dist'),
        publicPath : '/'
    },
    module:{
        rules:[{
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader'
    },
    {
        test: /\.css$/i,
        use: [
            {
            loader : MiniCssExtractPlugin.loader,
            options : {
                publicPath: '/public/path/to/',
            },
        }, 
        'css-loader'
    ]
      }
    ]
    },
    devServer: {
        historyApiFallback: true,
      },
    plugins:[
        new hwp({template:path.join(__dirname, '/src/index.html')}),
        new MiniCssExtractPlugin({
            filename : '[name].css',
            chunkFilename : '[id].css',
        })
    ]
}

Contact.js

import React from 'react'
import styled from "styled-components"

const Container = styled.div`
    background-color : red;
`

 function contact() {
    return (
        <Container>
            <h1>
                Welcome to Contacts page
            </h1>
            
        </Container>
    )
}
export default contact