I’m working on a SULU project that uses Twig for the frontend and has a custom webpack for it. I need to use React for certain components, components that require more interaction, state management, etc. How can I do that actually? How can I adapt my webpack to both twig components and the react part I want to add?

const webpack = require("webpack");
const date = new Date();
const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = () => {
    return {
        plugins: [
            new ESLintPlugin({
                emitWarning: true,
                failOnError: true,
            }),

            new webpack.DefinePlugin({
                BUILD: JSON.stringify(
                    `BUILD: ${date.getDate()}.${
                        date.getMonth() + 1
                    }.${date.getHours()}.${date.getMinutes()}`
                ),
            }),
        ],
    };
};

I tried this, but it seems like its not working:

module.exports = () => {
    return {
        mode:
            process.env.NODE_ENV === "production"
                ? "production"
                : "development",
        entry: "./js/main.js",
        output: {
            path: path.resolve(__dirname, "../../public/build/website/js"),
            filename: "main.js",
        },
        module: {
            rules: [
                {
                    test: /.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react",
                            ],
                        },
                    },
                },
                {
                    test: /.module.scss$/,
                    use: [
                        "style-loader",
                        {
                            loader: "css-loader",
                            options: {
                                modules: {
                                    localIdentName:
                                        "[name]__[local]___[hash:base64:5]",
                                },
                            },
                        },
                        "sass-loader",
                    ],
                },
                {
                    test: /.scss$/,
                    exclude: /.module.scss$/,
                    use: ["style-loader", "css-loader", "sass-loader"],
                },
            ],
        },
        resolve: {
            extensions: [".js", ".jsx"],
        },
        plugins: [
            new ESLintPlugin({
                emitWarning: true,
                failOnError: true,
            }),
            new webpack.DefinePlugin({
                BUILD: JSON.stringify(
                    `${new Date().getDate()}.${
                        new Date().getMonth() + 1
                    }.${new Date().getHours()}.${new Date().getMinutes()}`
                ),
            }),
        ],
    };
};