Multi-root editor - conditional rendering of toolbar prevents display

[lnmp4000]

If you apply any sort of conditional rendering to the toolbarElement from the useMultiRootEditor hook, the toolbar will fail to display if it is not immediately mounted, or mounted later

e.g.

import React, { useState } from "react";
import MultiRootEditor from "@ckeditor/ckeditor5-build-multi-root";
import { useMultiRootEditor } from "@ckeditor/ckeditor5-react";

export default function MultiRootEditorDemo(props) {
  const [showToolbar, setShowToolbar] = useState(false);

  const editorProps = {
    editor: MultiRootEditor,
    data: props.data
  };

  const { toolbarElement, editableElements } = useMultiRootEditor(editorProps);

  return (
    <>
      <div>
        <button onClick={() => setShowToolbar(!showToolbar)}>
          Show Toolbar
        </button>
      </div>
      <hr />

      <div>
        <div>ShowToolbar is set to: {JSON.stringify(showToolbar)} </div>
        <div>{showToolbar && toolbarElement}</div>
        {editableElements}
      </div>
    </>
  );
}

In the above example, using the button to set showToolbar to true, still doesn't let the toolbar render.
If showToolbar is initially set to true then the toolbar is rendered, but if the button is clicked to flip showToolbar to false it is impossible to render the toolbar again.

https://codesandbox.io/p/sandbox/condescending-shape-ks59rp?file=%2Fsrc%2Findex.js

[DawidKossowski]

@lnmp4000, thank you for reporting this issue. We will address and release a fix in January.

In the meantime, you can use a workaround by adding a CSS class to hide the toolbar.