What is wrong with my component? I couldn't figure what is the error message trying to explain to me, so I need help.
Here is the code and the screenshot of my error message:

"use client";

import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";

interface MarkdownResponseProps {
  content: string;
}

export default function MarkdownResponse({ content }: MarkdownResponseProps) {
  return (
    <ReactMarkdown
      components={{
        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || "");
          return !inline && match ? (
            <SyntaxHighlighter
              {...props}
              style={atomDark}
              wrapLongLines
              language={match[1]}
              PreTag="div"
            >
              {String(children).replace(/\n$/, "")}
            </SyntaxHighlighter>
          ) : (
            <code {...props} className={className}>
              {children}
            </code>
          );
        },
      }}
      className="overflow-hidden text-sm leading-7"
    >
      {content || ""}
    </ReactMarkdown>
  );
}