How to add filename or title in react syntax hightligting

Question

Hi I've successfully add react syntax hightlight to my project that using gatsbyjs and strapi, from strapi the content was formatted in markdown so i've add react-markdown and react-syntax-hightlight to handle rendering and syntax hightlighting in my application

here's from what i've implemented so far

Article.js

import React from "react"
import ReactMarkdown from "react-markdown"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
import rehypeRaw from "rehype-raw"
import remarkGfm from "remark-gfm"
import remarkSlug from "remark-slug"
import "../../../styles/language.css"

const ArticleContent = ({ content }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm, remarkSlug]}
      rehypePlugins={[rehypeRaw]}
      children={content}
      linkTarget="_blank"
      transformImageUri={uri =>
        uri.startsWith("http") ? uri : `${process.env.GATSBY_ROOT_URL}${uri}`
      }
      components={{
        code({ node, inline, className, children, ...props }) {
          const match =
            className !== undefined
              ? className.replace("language-", "")
              : "code"
          return !inline && match ? (
            <div className="relative">
              {(match !== "shell-session" || match === null) && (
                <p
                  className={`code-hightlight language-${match} font-jost text-sm font-light tracking-wide rounded-b absolute right-2 -top-5 px-2 py-1 bg-tertiary`}
                >
                  {match}
                </p>
              )}
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, "")}
                style={vscDarkPlus}
                language={match}
                PreTag="div"
                {...props}
              />
            </div>
          ) : (
            <code className={`rounded-md ${className}`} {...props}>
              {children}
            </code>
          )
        },
      }}
    />
  )
}

export default ArticleContent

here i've implemented latest react markdown and how to add syntax highlight above. here's what is look like

From this i want to add some title or filename for example App.js before displaying the syntax highlight. Since this is using markdown so how am i suppose to do to achieve this?

here's the currently formatted markdown to display that syntax hightlight above

```jsx
 const App = () => {
  const [todos, setTodos] = useState([
    { text: "Buy Food", isCompleted: false },
    { text: "Learn React", isCompleted: true },
    { text: "Build todo app", isCompleted: true }
  ]);

  //...
}
```