How to configure Annotation display mode when add Comments Plugins

[nighttiger1990]

I follow this integrate and this display mode
But I can't configure out show Wide Sidebar or Inline or Narrow Sidebar.

1./ This above not show any Sidebar. How can I show any Sidebar? I want to work with many ckeditor5 instance too

2./ When I select some text and click Comment button on Toolbar, I got this error. How can I add comments?

Plus: I download custom build from online builder (without Comments Plugins). Then I add Comments Plugins mannually.
I'm using LicenseTrial key
Hope anyone help me. Thank for working!!

[nighttiger1990]

I resolved problem "2./" by this doc
I can show Wide or Narrow Sidebar with this fix. But don't know how to configure for multi instance

onReady={(editor) => {
                editor.plugins.get('Sidebar').setContainer(document.querySelector('.sidebar-x'))
                editor.plugins.get('AnnotationsUIs').switchTo('wideSidebar')
              }}

[nighttiger1990]

I end my problem with this

import React, { useEffect, useRef, useState } from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import Editor from '@ckeditor/ckeditor5-custom-build/build/ckeditor'
import classNames from 'classnames'
import ckeditor5Helpers from '../helpers/ckeditor5Helpers'

const commentSideBarDisplayMode = ['inline', 'wideSidebar', 'narrowSidebar']
const defaultConfig = {
  placeholder: 'Typing here...',
  fontSize: {
    options: [9, 11, 13, 'default', 17, 19, 21],
  },
  extraPlugins: [ckeditor5Helpers.createImageUploadPlugins()],
  licenseKey:
    'my-secret-key',
  sidebar: {
    // preventScrollOutOfView: false,
  },
  toolbar: [
    'bold',
    'underline',
    'italic',
    'strikethrough',
    'alignment',
    '|',
    'comment',
    'commentsArchive',
  ],
  commentsOnly: true,
}
/**
 *
 * @param {EditorConfig} param0
 * @param  {EditorConfig} otherProps
 * @returns
 */
const CCKEditor5WithComments = (
  { value, config, onChange, onBlur, onFocus, onReady, onError, invalid, valid },
  ...otherProps
) => {
  const sideBarRef = useRef()
  const editorRef = useRef()
  const [displayMode, setDisplayMode] = useState(commentSideBarDisplayMode[0])
  const onReadyEditor = (editor) => {
    editorRef.current = editor
    onReady?.(editor)
  }
  const onChangeEditor = (e, editor) => {
    onChange?.(editor.getData())
  }
  const onBlurEditor = (e, editor) => {
    onBlur?.(e, editor)
  }
  const onFocusEditor = (e, editor) => {
    onFocus?.(e, editor)
  }
  const onErrorEditor = (error, errorDetail) => {
    console.error(error, errorDetail)
    onError?.(error, errorDetail)
  }

  useEffect(() => {
    if (sideBarRef.current) {
      sideBarRef.current.style.display =
        displayMode === commentSideBarDisplayMode[0] ? 'none' : 'block'
    }
  }, [displayMode])

  useEffect(() => {
    // editor.plugins.get('Sidebar').setContainer(document.querySelector('.sidebar-comment'))
    if (editorRef.current) {
      editorRef.current.plugins.get('Sidebar').setContainer(sideBarRef.current)
      editorRef.current.plugins.get('AnnotationsUIs').switchTo(displayMode)
    }
    return () => {
      if (editorRef.current) {
        editorRef.current.plugins?.get('AnnotationsUIs')?.deactivateAll()
      }
    }
  }, [])
  return (
    <div
      className={classNames({
        'is-valid': valid === true ? true : false,
        'is-invalid': invalid === true ? true : false,
        'editor-container': true,
      })}
    >
      <CKEditor
        editor={Editor}
        config={{
          ...defaultConfig,
          ...config,
          extraPlugins: [...defaultConfig.extraPlugins, ...(config?.extraPlugins || [])],
        }}
        data={value}
        onReady={onReadyEditor}
        onChange={onChangeEditor}
        onBlur={onBlurEditor}
        onFocus={onFocusEditor}
        onError={onErrorEditor}
        {...otherProps}
      />
      <div
        className={classNames('sidebar-container', {
          narrow: displayMode === commentSideBarDisplayMode[2],
        })}
        style={{
          minWidth:
            displayMode === commentSideBarDisplayMode[0]
              ? 0
              : displayMode === commentSideBarDisplayMode[1]
                ? 300
                : 65,
        }}
        ref={sideBarRef}
      ></div>
    </div>
  )
}

export default CCKEditor5WithComments