How can I change the width of the image that comes from sanity blockcontent

Question

I am using Mantine, Next.js and Sanity. I can't change the width or height well I can't customize the image.

Here is my code.

function SinglePost({ post }: Props) {
  const { classes } = useSinglePostStyles();

  const serializers = {
    types: {
      // image: (props: any) => <img className="w-53" {...props} />,
      h1: (props: any) => <h1 className={classes.h1} {...props} />,
      h2: (props: any) => <h2 className={classes.h2} {...props} />,
      li: ({ children }: any) => <li className={classes.list}>{children}</li>,
      link: ({ href, children }: any) => (
        <a href={href} className={classes.link}>
          {children}
        </a>
      ),
    },
  };

  return (
    <div className={classes.hero}>
      <Container size="lg" className={classes.innerHeroSection}>
        <div>
          <ResponsiveHeading.H2 className={classes.postTitle}>{post.title}</ResponsiveHeading.H2>

          <ResponsiveHeading.P className={classes.subHeading}>
            Blog post by {post.author.name}
            <br /> Published at {new Date(post.createdAt).toDateString()}
          </ResponsiveHeading.P>
        </div>

      </Container>
      {/*  Right Side - Image Side  */}
      <Container size="md" className={classes.body}>
        <PortableText
          className="max-w-sm"
          dataset={process.env.NEXT_PUBLIC_SANITY_DATASET!}
          projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!}
          content={post.body}
          serializers={serializers}
        />
      </Container>
    </div>
  );
}

Now the image that I am getting from the body is massive and breaks the responsiveness of my code.

I tried to do this:

 const serializers = {
    types: {
      image: (props: any) => <img className="w-53" {...props} />,
    },

This doesn't work.