React compiler, how to setup with craco/webpack

Question

I migration in 18 to 19 react today. Read documentation, installed packages babel-plugin-react-compiler , for eslint eslint-plugin-react-compiler.

I'm not that good at setting up webpack, but from the documentation I didn't quite understand what was required of me.

this is my code

/* eslint-disable global-require */
const PUBLIC_PATH = '/services/sea-agreements/';
process.env.REACT_APP_BUILD_DATE = new Date().getTime() / 1000;

module.exports = {
    webpack: {
        configure: {
            output: {
                publicPath: PUBLIC_PATH,
                filename: 'static/js/[name].js',
            },
            optimization: {
                runtimeChunk: false,
                splitChunks: {
                    chunks() {
                        return false;
                    },
                },
            },
        },
    },
    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
                    webpackConfig.plugins[5].options.moduleFilename = () => 'static/css/main.css';
                    return webpackConfig;
                },
            },
            options: {},
        },
        { plugin: require('@semantic-ui-react/craco-less') },
    ],
};

I don’t quite understand how to do this in my code following the example documentation. enter image description here

Isn't that the way I should add?

plugins: [
        {
            plugin: require('babel-plugin-react-compiler'),
            options: {},
        },
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
                    webpackConfig.plugins[5].options.moduleFilename = () => 'static/css/main.css';
                    return webpackConfig;
                },
            },
            options: {},
        },
        { plugin: require('@semantic-ui-react/craco-less') },
    ],

I tried to add babel-loader, but I think I'm doing something wrong