I'm trying to setup a project with next js and antd, I do not want to use antd default styles and want to use my own custom style, for that I'm trying to setup theme but I'm not able to, somebody please help, this is my next.config.js file .

/** @type {import('next').NextConfig} */

const modifyVars = require('./styles/antd-theme-overrides.json');

const nextConfig = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    // Load SVG files
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    // Load image files
    config.module.rules.push({
      test: /\.(jpg|png|gif|pdf)$/,
      loader: 'file-loader',
    });
    // Load Ant Design LESS styles
    config.module.rules.push({
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader', // translates CSS into CommonJS
        },
        {
          loader: 'less-loader', // compiles Less to CSS
          options: {
            lessOptions: {
              modifyVars: modifyVars,
              javascriptEnabled: true,
            },
          },
        },
      ],
    });

    return config;
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'd3brxqpbppsf9r.cloudfront.net',
        port: '',
        pathname: '/assets/**',
      },
    ],
  },
  // Add any additional Next.js configuration options here
};

module.exports = nextConfig;