Ckeditor 5 does not work on Next.JS

Question

I’m making the following mistake:

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in Components) or a class/Function (for Composite Components) but got: Undefined. You likely forgot to export your Component from the file it’s defined in, or you Might have Mixed up default and named Imports. Check the render method of Resumos.

I tried two different ways I found to solve this, but none

Form 1:

import dynamic from "next/dynamic";

const { CKEditor } = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-react');
  },
  { ssr: false }
);

const {ClassicEditor} = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-build-classic');
  },
  { ssr: false }
);

const Resumos = ({id}) => {
  <CKEditor 
       editor={ ClassicEditor }
       data={textoResumoAluno}
       onChange={handleChangeTextoResumoAluno}
  />
}

Form 2:

const Resumos = ({id}) => {
    const editorRef = useRef()
    const [ editorLoaded, setEditorLoaded ] = useState( false )
    const { CKEditor, ClassicEditor } = editorRef.current || {}

    useEffect( () => {
        editorRef.current = {
          CKEditor: require( '@ckeditor/ckeditor5-react' ),
          ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' )
        }
        setEditorLoaded( true )
    }, [] );


{editorLoaded ? ( 
      <CKEditor
           editor={ ClassicEditor }
           data={textoResumoAluno}
           onInit={ editor => { /*You can store the "editor" and use when it is needed.
                 console.log('Editor is ready to use!', editor)*/
            }}
           onChange={handleChangeTextoResumoAluno}
       /> 
  ) : (
          <div>Editor loading</div>
  )}
}