astro中使用第三方控件问题

import Editor from "@monaco-editor/react";
import { useState } from "react";
import Markdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw"; // 6.1.1 works! 7.0.0 don't
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";

export default () => {
	const [text, setText] = useState("# hello");
	return (
		<div style={{ display: "flex", height: "40vh" }}>
			<div style={{ flex: "50%" }}>
				<Editor
					height={"100%"}
					defaultLanguage="markdown"
					defaultValue={text}
					onChange={(value, _event) => setText(value || "")}
				/>
			</div>
			<div style={{ flex: "50%", height: "100%", overflow: "scroll" }}>
				<Markdown
					rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeSlug]}
					remarkPlugins={[remarkGfm, remarkToc]}
				>
					{text}
				</Markdown>
			</div>
		</div>
	);
};

一直在<Editor处出错，经搜索，进行如下修改：

import Editor from "@monaco-editor/react";
import { useState } from "react";
import Markdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw"; // 6.1.1 works! 7.0.0 don't
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";

// 没有下面的语句，编译失败
const MNEditor = Editor.default ?? Editor;

export default () => {
	const [text, setText] = useState("# hello");
	return (
		<div style={{ display: "flex", height: "40vh" }}>
			<div style={{ flex: "50%" }}>
				<MNEditor
					height={"100%"}
					defaultLanguage="markdown"
					defaultValue={text}
					onChange={(value, _event) => setText(value || "")}
				/>
			</div>
			<div style={{ flex: "50%", height: "100%", overflow: "scroll" }}>
				<Markdown
					rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeSlug]}
					remarkPlugins={[remarkGfm, remarkToc]}
				>
					{text}
				</Markdown>
			</div>
		</div>
	);
};