In my /blog/posts/[id]/page i have this:

import React from "react";

import { getCategorizedPostPreviews, getPostData, PostData } from "@/lib/posts";
import PostLayout from "@/app/blog/posts/components/post-layout";

export async function generateMetadata({ params }: Props) {
  const postData: PostData = await getPostData(params.id);

  return {
    title: postData.title,
  };
}

type Props = {
  params: {
    id: string;
  };
};
export default async function Post({ params }: Props) {
  const postData: PostData = await getPostData(params.id);
  const furtherReadingsData = getCategorizedPostPreviews();

  return <PostLayout furtherReadingsData={furtherReadingsData} {...postData} />;
}

The post-layout component:

const ResponsiveImage = (props: any) => (
    <div className="my-6">
      <Image {...props} />
    </div>
);

export default function PostLayout(props: Props) {
  const {contentHtml } = props;
  return (
    <MDXProvider components={{ img: ResponsiveImage }}>
          <div className="text-gray-600" dangerouslySetInnerHTML={{ __html: contentHtml }} />
    </MDXProvider>
  );
}

But the images in my blog post do't have the div with the classname... It basically is just not working...
https://nextjs.org/docs/pages/building-your-application/configuring/mdx#custom-elements