How to insert HTML(like <div>) into <div calssName="ql-container">

[goodafteryoon]

I want to place the side panel I made under the toolbar and inside the <div className="ql-container"/> But it doesn't work as a render

import dynamic from "next/dynamic";
import styled from "@emotion/styled";
import { useEffect, useMemo } from "react";

import "react-quill/dist/quill.snow.css";

const QuillEditor = dynamic(() => import("react-quill"), { ssr: false });

const Editor = () => {
  const modules = useMemo(
    () => ({
      toolbar: {
        container: "#quilltoolbar",
      },

      clipboard: {
        matchVisual: false,
      },
    }),

    []
  );

  const formats = ["header", "bold", "italic", "underline", "bullet", "list"];

  useEffect(() => {
    console.log("Quill is ready!");
  }, []);

  return (
    <EditorContainer>
      <div id="quilltoolbar">
        <div className="tool">
          <button className="ql-bold">Bold</button>
          <button className="ql-italic">Italic</button>
          <button className="ql-underline">Underline</button>
          <button className="ql-list" value="ordered">
            List
          </button>
          <button className="ql-list" value="bullet">
            Bullet
          </button>
        </div>
      </div>
      <QuillEditor modules={modules} formats={formats}>
        <div className="editing-area">
          <div className="panel">left</div> // it dosen't render
          <div className="ql-editor" />
          <div className="right-panel">right</div> // it dosen't render too
        </div>
      </QuillEditor>
    </EditorContainer>
  );
};

export default Editor;

const EditorContainer = styled.div`
  width: 100vw;
  height: calc(100vh - 60px);
  overflow-y: hidden;
  overflow-x: hidden;
  top: 0px;
`;

Does anyone have HTML or components located inside the ql-container?