react-syntax-highlighter style(theme). The style is not what I intended and different from Demo

Question

I'm using react-syntax-highlighter for .md file.

So, I selected style(theme) from library, but it's quite different from Demo style.

Demo:

My .md file:

and my code:

import SyntaxHighlighter from "react-syntax-highlighter";
import { androidstudio } from "react-syntax-highlighter/dist/esm/styles/hljs";
...

const MarkdownViewer = ({ content }: Prop) => {
  return (
    <Markdown
      className={st.markdown}
      remarkPlugins={[remarkGfm]}
      components={{
        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || "");
          return !inline && match ? (
            <SyntaxHighlighter
              showLineNumbers={true}
              lineNumberStyle={{
                paddingRight: "1em",
                textAlign: "right",
                userSelect: "none",
                opacity: "0.3",
              }}
              language={match[1]}
              PreTag="div"
              {...props}
              customStyle={{
                fontSize: "16px",
                padding: "20px 20px",
                lineHeight: "22px",
                margin: "30px 0",
              }}
              style={androidstudio}
              className="custom-syntax-highlighter"
            >
              {String(children).replace(/\n$/, "")}
            </SyntaxHighlighter>
          ) : (
            <code {...props}>{children}</code>
          );
        },
        img: (image) => (
          <Image
            src={image.src || ""}
            alt={image.alt || ""}
            width={0}
            height={0}
            sizes="auto"
            className={st.image}
          />
        ),
        h2: ({ node, ...props }) => <H2Underline props={props} />,
        h3: ({ node, ...props }) => <H3Underline props={props} />,
        pre: ({ node, ...props }) => (
          <pre className={st.pre_container} {...props}></pre>
        ),
        blockquote: ({ node, ...props }) => <Blockquote props={props} />,
        ul: ({ node, ...props }) => <UlAndLi props={props} />,
        ol: ({ node, ...props }) => <OlAndLi props={props} />,
        hr: () => <HrLine />,
        a: ({ href }) => <A href={href || ""} />,
      }}
    >
      {content}
    </Markdown>
  );
};

The White words are converted to red in my .md file. I don't want red. And other theme has same situation (some words are converted to red)

I adjust styles and themes, but I don't know how to solve it.