react-quilljs和reactjs-popup不能一起工作

我正在使用 react-quilljs 和 reactjs-popup 并且无法让基于 quill 的编辑器显示在我的模式对话框中。我可以在主页上使用编辑器而没有问题，但它在弹出窗口中不起作用。

我有预期的进口：

import React from "react";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
import { useQuill } from "react-quilljs";

我的组件看起来像这样：

const NewIdeaDialog = ({ showNewIdea }) => {
  const { quill, quillRef } = useQuill();
  return (
    <Popup open={showNewIdea} nested>
      <div>
        <form action="" method="">
          <label for="IdeaDetails">Details</label>
          <div style={{ width: 500, height: 300 }} id="IdeaDetails">
            <div ref={quillRef} />
          </div>
        </form>
      </div>
    </Popup>
  );
}

当我设置showNewIdea到true父组件显示弹出，符合市场预期，但鹅毛笔编辑器完全丢失。它呈现了#IdeaDetails div一个孩子，就是<div></div>这样。孩子div是完全空的，没有造型。

我是否错过了可以使这项工作发挥作用的东西？我在网上找不到针对此问题列出的任何类似问题。