Next.js Image component doesn't show Cloudinary image

In a previous question, the author tries to load standard DOM img: cloudinary image doesn't show up

The answer was to specify cloudName and publicId props to Image -

<Image cloudName="doqurzmbt" publicId="public id from cloudinary" ... >

I'm trying to use the Next Image component to work with the Cloudinary image:

1. Fill next.config.js:

module.exports = {
  images: {
    deviceSizes: [300, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ["res.cloudinary.com"],
    loader: "cloudinary",
  },
};

2. Write a sample code:

import Image from "next/image";
export default function Page() {
  return (
    <>
      <p>Simple cloudinary example</p>
      <p>Standart image</p>
      <img
        src="https://res.cloudinary.com/dljazkzna/image/upload/v1604677935/img/1053.jpg"
        alt=""
        width="200"
      />
      <p>NextJS Image component</p>
      <Image
        alt="Cloudinary image"
        cloudName="dljazkzna"
        publicId="img/1053"
        width={300}
        height={300}
        src="1053.jpg"
      />
    </>
  );
}

Codesandbox link: https://codesandbox.io/s/nextjs-cloudinary-779pr?file=/pages/index.js

Problems: Image component doesn't show the image. According to the documentation: https://nextjs.org/docs/api-reference/next/image cloudName and publicId props are absent in the Image component.

What are the parameters I need to pass to the Next Image component?

Cloudinary image has these properties:

src="https://res.cloudinary.com/dljazkzna/image/upload/v1604677935/img/1053.jpg"
cloudName="dljazkzna"
publicId="img/1053"