Popup Setting is not working in <kendo-editor><kendo-toolbar>

Question

I have a very straight forward kendo-editor code like the one below

<div #containerRef>
    <kendo-editor style="height:500px">
          <kendo-toolbar>
            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
          </kendo-toolbar>
    </kendo-editor>
</div>

But my problem is that the dropdown is not showing inside the control but instead it's appending in the root component. I tried adding [PopupSettings]="{appendTo: containerRef}" in <kendo-toolbar> but still not working.

this is my code in .ts

@ViewChild('containerRef', { read: ViewContainerRef, static:true }) public containerRef: ViewContainerRef;

I confirmed in chrome developer tools that the popup is appending in the root component, that's why i use popupsettings but still it's not working.

Anyone experience the same issue?