#Gatsby gatsby-remark-admonitions doesn't render properly

Recently I want to use Gatsby to build a personal website, but the sample on the official website is too monotonous, I want to add some elements. And I'm following the steps from here to install the plugin (admonitions).

I found some problem. There's no error occur, but also no rendering. I'm not sure if I'm missing some steps.

Here is my code:

// gatsby-config.js

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-admonitions`,
            options: {
              customTypes: {
                custom: {
                  keyword: "test",
                  emoji: '',
                  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>'
                },
              },
              tag: ":::",
              icons: "svg",
            }
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    }

// gastby-browser.js
// Admonition

import "remark-admonitions/styles/classic.css";