Next.js : Dynamic import of component stuck on Loading stage

Question

I'm using Next.js on a project where the editor component (EditorJS found https://github.com/Jungwoo-An/react-editor-js) can't use SSR. Following the Next docs, I'm trying to dynamically import my Editor component on a page. When I load the page, all components but the Editor component load.

Using the React Components tab in Chrome Dev Tools, it shows me that the Editor component is a LoadableComponent that is stuck on the loading phase.

Editor code (Editor.js)

import React from "react";
import axios from 'axios';
import EDITOR_JS_TOOLS from "./editor-constants"
import EditorJs from "react-editor-js"
// const DynamicComponent = dynamic(() => import("react-editor-js").then((mod) => mod.EditorJs) ,{"ssr" : false})
import { API_LINK, getDoc } from "../services"
/* Document editor for a given forum */
export default function Editor(props) {

    /* API call to save current document state */
    async function saveDoc() { 
        const ENDPOINT = API_LINK + "addDoc"
        const savedData = instanceRef.current.save();
        const DATA = { "link": props.link, "doc": savedData }
        const res = await axios.post(ENDPOINT, DATA)
        return res.data;
    }

    const [editorState, setEditorState] = React.useState()
    /* On load, get editor document data */ 
    React.useEffect( async () => {
        const a = await getDoc(props.link).then((res) => {
            setEditorState(res.data)
        })
    }, [])

    const instanceRef = React.useRef(null);
    return (
        <div>
            {/* Save button */}
            <button onClick={saveDoc}>Save!</button>
            {/* Edtor */}
            <EditorJs
                instanceRef={instance => (instanceRef.current = instance)}
                tools={EDITOR_JS_TOOLS}
                i18n={{
                    messages: {}
                }}
                data={editorState}
                enableReInitialize={true}
            />
        </div>
    );
    
};

Page code [id.js]

import dynamic from "next/dynamic";
const DynamicComponent = dynamic(() => import('../../components/Editor'), { ssr: false })
import { ForumComments } from '../../components/ForumComments'
import styles from '../../styles/pages/forum.module.css';
import * as React from 'react'
import { useRouter } from 'next/router'


export default function Forum(props) {
    const router = useRouter()
    const { id } = router.query
    if (id == undefined) {
        return (
            <p> Loading ... </p>
        )
    }
    else {
        return (
            <React.Fragment>
                <div className={styles.forumTitle}>
                    <h1> 
                        { /* props.match.params.title */ } 
                        {id}
                    </h1>
                </div>
                <div className={styles.bothSide}>
                    <div className={styles.leftForum}>
                        <ForumComments linkProp={id} />
                    </div>
                    <div className={styles.rightForum}>
                        <DynamicComponent key={"document"} link={id} />
                    </div>
                </div>
            </React.Fragment>
        );
    };
};

Here's a screenshot from the Components tab of the relevant component

Screenshot from Components tab showing loading state is null of type Loadable Component