TipTap Collaboration Not Working on Next.js?

Question

Problem: I have two sessions loading with the same id and token passed in; yet, the same document isn't loading. All you need for sessions to collaborate is the those attributes to match, correct??

Framework/Technologies Used: Next.js

UI/Screenshots: As you all can see below, I have the last four digits of the token and ID logged on the UI so you guys can see that both sessions are loading the exact same token and ID...

I have the last four digits of the token and ID logged on the UI so you guys can see that both sessions are loading the exact same token and ID...

Code Snippet:

export default function TextEditor() {
  const CustomDocument = Document.extend({
    content: 'heading block*',
  });
  const getURLTokenAndID = () => {
    const urlParams = new URLSearchParams(window.location.search);
    return { URL_ID: urlParams.get('id'), URL_TOKEN: urlParams.get('token') };
  };
  const { URL_ID, URL_TOKEN } = getURLTokenAndID();
  const doc = new Y.Doc();
  const [token, setToken] = useState<string>(URL_TOKEN || '');
  const [loading, setLoading] = useState(true);
  const [documentID, setDocumentID] = useState<string>(URL_ID || uniqueID);

 // Redacted the ActionButton implementation

  useEffect(() => {
    // Function to fetch token and set loading to false
    const fetchToken = async () => {
      // Fetch token
      try {
        const response = await fetch('http://localhost:8888/getCollabToken');
        if (!response.ok) {
          throw new Error('Failed to fetch token');
        }
        const data = await response.json();
        setToken(data.token);
        setLoading(false);
      } catch (error) {
        // setError(error.message);
        setLoading(false);
      }
    };
    // Fetch token if URL_TOKEN is not provided
    if (!URL_TOKEN) {
      fetchToken();
    } else {
      // Set collabToken if URL_TOKEN is provided
      setToken(URL_TOKEN);
      if (URL_ID) {
        setDocumentID(URL_ID);
      }
      setLoading(false);
    }
  }, [URL_TOKEN, URL_ID]);

  // TODO: Cleanup usages of 3 useEffects
  useEffect(() => {
    if (!URL_TOKEN) setToken(token || '');
    const provider = new TiptapCollabProvider({
      name: documentID, // any identifier - all connections sharing the same identifier will be synced
      appId: 'rm8441ko',
      token: token,
      document: doc,
    });
    return () => {
      provider.destroy();
    };
  }, []);

  const editor = useEditor({
    extensions: [
      CustomDocument,
      StarterKit.configure({
        document: false,
        history: false,
      }),
      Placeholder.configure({
        placeholder: ({ node }) => {
          return node.type.name === 'heading' &&
            node.attrs &&
            node.attrs.levels === 1
            ? 'What’s the song title?'
            : '';
        },
      }),
      Underline,
      Collaboration.configure({
        document: doc,
      }),
    ],
  });

  useEffect(() => {
    editor?.commands.setContent(
      '<h1>Content</h1>`
    );
  }, [editor]);

  return loading ? (
    <AiOutlineLoading className={styles.spinner} />
  ) : (
    <>
      <h2>Collab Token: {token.slice(-4)}</h2>
      <h2>DocumentID: {documentID.slice(-4)}</h2>
      <EditorContent editor={editor} className={styles.editorContent} />
    </>
  );
}

What I've Tried: Followed the TipTap Collaboration Guide walkthrough almost exactly (minus variable names and flexibility with API routing).