Using Hocuspocus for collaborative editing

1

So Im working on a product where having collaborative editing would be very beneficial, and we are using Hocuspocus with yjs to do that, however there are some problems with it that I cant seem to wrap my head around. Here is some front end code from a nextjs app that just has an editor for users to type in

const provider = new HocuspocusProvider({
    url: "ws://127.0.0.1:3010",
    name: tableId,
    preserveConnection: false,
    quiet: false,
  });

  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Bold,
      Italic,
      Underline,
      Strike,
      BulletList,
      OrderedList,
      ListItem,
      Collaboration.configure({
        document: provider.document
      })
    ],
  });

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>{tableId}</h1>
        <div className={styles.toolbar}>
          <button onClick={() => editor?.commands.toggleBold()}>B</button>
          <button onClick={() => editor?.commands.toggleItalic()}>I</button>
          <button onClick={() => editor?.commands.toggleUnderline()}>U</button>
          <button onClick={() => editor?.commands.toggleStrike()}>S</button>
        </div>
        <div className={styles.collaborators}>
          You and 2 others
        </div>
      </div>
      <div className={styles.editor}>
        <EditorContent editor={editor} className={styles['editor-content']} />
      </div>
    </div>
  );

Then running the websocket server is this code, which uses a hocuspocus hook for to load the document, however it seems to only sporadically work, as reloading the page or revistiting doesnt seem to activate this hook and its only once for each time the websocket server is started

onLoadDocument: async ({ document }) => {
    console.log('loading document');
    try {
      const name = document.name;

      // upsert the document in the database
      const db = await getDB(dbUri);
      const query = `select document from table_document where table_id = $1`;
      const result = await db.query(query, [name]);
      if (result.rows.length === 0) {
        console.log('creating new document');
        const ydoc = new Y.Doc();
        const children = ydoc.getArray('children');
        const child = new Y.Map();
        const childText = new Y.Text();

        ydoc.getText('type').insert(0, 'Document for table ' + name + '\n\n\n\n\n\n\n\n');
        childText.insert(0, 'Document for table ' + name + '\n\n\n\n\n\n\n\n');
        child.set('text', childText)
        children.push([child]);
        const m = Y.encodeStateAsUpdate(ydoc);
        await db.query(`insert into table_document (table_id, document) values ($1, $2)`, [name, JSON.stringify(m)]);
        return ydoc;
      } else {
        console.log('loading document from db');
        const ydoc = new Y.Doc();
        const update = result.rows[0].document;
        Y.applyUpdate(ydoc, new Uint8Array(Object.values(update)));
        return ydoc;
      }

    } catch (err) {
      console.error(err);
      throw err;
    }
  }

Ive been banging my head on a wall for this for a while now and am stuck on where to go next from here