How to use size in next js with next/future.image?

I am using nextjs ^12.3.0 Image. I am not able to get proper image size for different device screen size. It is always like srcset=_next/myimg...&w=1200&q=75 1200w and src=_next/myimg...&w=1200&q=75.

Here is my image component.

            <div className="mx-auto w-[100%] md:bg-card md:w-[720px] max-w-4/5" key={img}>
              <BlurImage
                src={img}
                alt={`image alt`}
              />
            </div>

Here is the BlurImage.

export const BlurImage: FunctionComponent<ImageProps> = ({ src, alt }) => {
  const [isLoading, setLoading] = useState(true);
  return (
    <Image
      src={src}
      className={`
        'duration-700 ease-in-out',
        ${isLoading ? 'grayscale blur-2xl scale-110' : 'grayscale-0 blur-0 scale-100'}
      `}
      alt={alt}
      width="0"
      height="0"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
      style={{ width: '100%', height: 'auto' }}
      onLoadingComplete={() => setLoading(false)}
    />
  );
};

Here my my next.config.js

const nextConfig = {
    images: {
        formats: ['image/avif', 'image/webp'],
        deviceSizes: [320, 420, 640, 768, 1024, 1200],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 420, 640, 720, 768],
    }
  }

I understand that nextjs should automatically adjust as per these sizes and create versions of the size mentioned in the config for srcset. But as you can see it only creates a version with 1200w. This is causing some performance issue, that is provided out of the box with next. How to use sizes with next js?