在 React JS 中使用react-draft-wysiwyg 下拉菜单不起作用

我尝试使用react-draft-wysiwyg使用docs

一些图标显示但不起作用：block type, font, font size,pickerColor（下拉菜单不起作用）。例如，font size默认设置为16，但我无法更改它......

import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const TabContent = ({ name, typeProof }) => {
  const [text, setText] = useState(
  () => EditorState.createEmpty(),);


  return (
    <>
      <SafeAreaView>
        <Editor
          editorState={text}
          onEditorStateChange={setText}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          toolbarClassName="toolbarClassName"
          placeholder="Enter your text here:"
          style={{
           //some styles
          }}
          toolbar={{
            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'],
            inline: { inDropdown: true },
            blockType: { inDropdown: true },
            fontSize: { inDropdown: true },
            fontFamily: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            colorPicker: { inDropdown: true },
            embedded: { inDropdown: true },
            remove: { inDropdown: true },
            history: { inDropdown: true },
         }}
        />
      </SafeAreaView>     
    </>
  );
};

export default function Tabs({ data }) {
  return (
    <TabsComponent forceRenderTabPanel>
      <TabList>
        {data.map(({ name }, i) => (
          <Tab key={name}>Question {i + 1}</Tab>
        ))}
      </TabList>
      {data.map(({ name, typeProof }) => (
        <TabPanel key={name}>
          <TabContent {...{ name, typeProof }} />
        </TabPanel>
      ))}
    </TabsComponent>
  );
}

嗯，这很奇怪，我对此没有任何解释，但我只改变了index.js:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

by :

import "./index.css";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

有解释吗？我很高兴了解...