Image not displaying in .mdx file using gatsby-plugin-mdx & gatsby-remark-images

Question

I have this .mdx file:

![profile](./images/icon.png)

But the image is not displaying on my website, even if it seems to work. The element created is 0x0

My plugins for gatsby-config.js file:

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images-projects`,
        path: `${__dirname}/projects/images`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `projects`,
        path: `${__dirname}/projects`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `articles`,
        path: `${__dirname}/articles`,
      },
    },
    `gatsby-plugin-mdx-source-name`,
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    `gatsby-remark-images`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 500,
              linkImagesToOriginal: false,
              quality: 50,
              withWebp: true,
            },
          },
        ],
      },
    },
    
  ],

In the console of the web I can see that the image is inside a element like this:

<span><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 500px; ">
      <span class="gatsby-resp-image-background-image" style="padding-bottom: 100%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/png;base64,<image>;); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
  <picture>
          <source srcset="/static/53aa06cf17e4239d0dba6ffd09854e02/42aaf/icon.webp 125w,
/static/53aa06cf17e4239d0dba6ffd09854e02/1e0be/icon.webp 250w,
/static/53aa06cf17e4239d0dba6ffd09854e02/b0a15/icon.webp 500w,
/static/53aa06cf17e4239d0dba6ffd09854e02/bd5dd/icon.webp 512w" sizes="(max-width: 500px) 100vw, 500px" type="image/webp">
          <source srcset="/static/53aa06cf17e4239d0dba6ffd09854e02/fac75/icon.png 125w,
/static/53aa06cf17e4239d0dba6ffd09854e02/63868/icon.png 250w,
/static/53aa06cf17e4239d0dba6ffd09854e02/0b533/icon.png 500w,
/static/53aa06cf17e4239d0dba6ffd09854e02/01e7c/icon.png 512w" sizes="(max-width: 500px) 100vw, 500px" type="image/png">
          <img class="gatsby-resp-image-image" src="/static/53aa06cf17e4239d0dba6ffd09854e02/0b533/icon.png" alt="profile" title="" loading="lazy" decoding="async" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">
        </picture>
    </span></span>

In my blog template I am displaying everything with MDXProvider: <MDXProvider components={components}>{children}</MDXProvider>

But the image doesn't get displayed at all.

I looked at many questions from other people on StackOverflow but nothing is working. I followed the tutorial here: documentation

I am desperate. If nothing is working I will try this way: Frontmatter + MDXProvider or Static folder