Antd and webpack5 configuration problem in nextjs

I have problem with configuring antd in nextjs version 12.0.8. I know i can fix this with downgrading webpack to version 4 but its necessary for me to use webpack 5.

antd version: 4.18.3 Webpack version: 5.65.0 nextjs version: 12.0.8

Here is my next config:

module.exports = withImages({...withFonts({
...withCss({
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
      importLoaders: 0
    },
    cssLoaderOptions: {
      importLoaders: 3,
      localIdentName: '[local]___[hash:base64:5]'
    },
    // webpack5: false,
    webpack: (config, {isServer}) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader'
        });

      }
        // config.module.rules.push({
        //   test: /\.(png|jpe?g|gif)$/i,
        //   loader: 'file-loader'
        // })
      return config;
    }
  })
})
})
});

But i got this error:

TypeError: Cannot set property 'styles' of undefined
at module.exports (/home/sajjad/Project/pishrun-frontend/node_modules/@zeit/next-css/css-loader-config.js:25:56)
at Object.webpack (/home/sajjad/Project/pishrun-frontend/node_modules/@zeit/next-css/index.js:15:36)
at Object.webpack (/home/sajjad/Project/pishrun-frontend/node_modules/next-fonts/index.js:42:27)
at Object.webpack (/home/sajjad/Project/pishrun-frontend/node_modules/next-images/index.js:63:27)
at Object.getBaseWebpackConfig [as default] (/home/sajjad/Project/pishrun-frontend/node_modules/next/dist/build/webpack-config.js:1390:32)
at async Promise.all (index 0)
at async Span.traceAsyncFn (/home/sajjad/Project/pishrun-frontend/node_modules/next/dist/trace/trace.js:75:20)
at async Span.traceAsyncFn (/home/sajjad/Project/pishrun-frontend/node_modules/next/dist/trace/trace.js:75:20)
at async HotReloader.start (/home/sajjad/Project/pishrun-frontend/node_modules/next/dist/server/dev/hot-reloader.js:329:25)
at async DevServer.prepare (/home/sajjad/Project/pishrun-frontend/node_modules/next/dist/server/dev/next-dev-server.js:295:9)

Thanks for your help.