使用nextjs-13
我想在markdown-to-jsx中使用prism-react-renderer来突出显示我的代码，我按照自己的理解编写了以下代码
page.tsx

import fs from "fs";
import Markdown from "markdown-to-jsx";
import matter from "gray-matter";
import { Highlight,themes} from "prism-react-renderer";
import React, { useState } from 'react';

const getPost = () => {
  const file = "posts/test.md";
  const content = fs.readFileSync(file, "utf8");
  const matterResult = matter(content);
  return matterResult;
};

const Page = () => {
  const post = getPost();
  return (
    <Markdown options={{
      wrapper: 'article', slugify: str => str,
      overrides: {
        pre: CodeBlock
      }
    }} className="markdown">{post.content}</Markdown>
  );
};

const CodeBlock = ({ children }: any) => {
  const code = children.props.children;
  const language = children.props.className?.replace("lang-", "").trim();

  return (
    <Highlight code={code} language={language} theme={themes.dracula}>
      {({ tokens, className, style, getLineProps, getTokenProps }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line })}>
              <span>{i + 1}</span>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
    
    //! This is OK
    // <pre className={`language-${language}`}>
    //   <code>
    //     {code}
    //   </code>
    // </pre>
)}

export default Page;

但是我在运行pnpm run dev时出错

Unhandled Runtime Error

Error: (0 , import_react.useState) is not a function or its return value is not iterable
Call Stack
themeToDict_default
node_modules/.pnpm/prism-react-renderer@2.0.3_react@18.2.0/node_modules/prism-react-renderer/dist/index.js (2592:4)
useThemeDictionary
node_modules/.pnpm/prism-react-renderer@2.0.3_react@18.2.0/node_modules/prism-react-renderer/dist/index.js (2770:26)

我已经检查了提示符的代码，但我不知道
我尝试了这个演示与相同的版本，它的工作正常
有什么问题，我该如何解决？