Editor in Sidebar menu

[Gulgil1]

I need to place an editor in the sidebar menu.
We want to use it as a "default" selector, since it's used in many grids/dialogs.

I have created a container for it in sidebar pane:

    <div class="s-sidebar-pane">
        <div id="s-sidebar-udbyder-filter" class="s-sidebar-udbyder-filter m-3">
          // Default filter here
        </div>
        <div id="s-sidebar-search" class="s-sidebar-search m-3">
            <i class="fa fa-search fa-flip-horizontal s-sidebar-search-icon"></i>
            <input id="s-sidebar-search-input" type="text" class="w-100 s-sidebar-search-input" placeholder="@Serenity.Web.WebTexts.Controls.QuickSearch.Placeholder.ToString(Localizer)">
        </div>

I then made this code:
import { Fluent } from "@serenity-is/corelib";
import { UdbyderEditorAll } from "./UdbyderEditor";

const editor = new UdbyderEditorAll({ showEmail: false });
editor
  .init()
  .change((evt: Event) => {
    //Set a cookie, sessionStorage or something
  });
const container = Fluent(document.getElementById("s-sidebar-udbyder-filter"));
editor.element.appendTo(container);
container.append(Fluent("div").text("Hello"));

But I only get this out:

<div id="s-sidebar-udbyder-filter" class="s-sidebar-udbyder-filter m-3">
          <!-- Default filter here-->
        <input type="text" class="s-FelineBackOffice-Common-UdbyderEditorAll s-Common-UdbyderEditorAll s-UdbyderEditorAll select2-offscreen" placeholder="--select--" tabindex="-1" title="">
  <div>Hello</div>
</div>

Any idea to get the editor to show?

[Gulgil1]

Figured it out. Just needed to add the "target" element in props:
const container = Fluent(document.getElementById("s-sidebar-udbyder-filter-container"));
const editor = new UdbyderEditorAll({ showEmail: false, element: container });