Cannot read properties of undefined (reading 'defineMode')

Hi all, having some issues with implementing a custom mode with defindeMode in V6 in a react app.
As the title states, I am getting an undefined error. I originally attempted this with the uiw/codemirror library, but it appears they don’t support a custom mode.

End result I want is for a token of 12312.53sddfsg.ssdjfs to have 3 separate colors based on their class / position in relation to the “.” separators

I am trying to use the editor to style a JWT token, and assign unique colors to each part of the token. From what I have read, a custom mode is required to achieve this. Here is a code snippet, any feedback would be appreciated, thanks!

import React, { useRef, useEffect, useState } from 'react'

import { EditorState, basicSetup } from '@codemirror/basic-setup'
import { EditorView } from '@codemirror/view'

export const CodeEditor = ({ setCodeEditorState }) => {
  const codeEditor = useRef()
  const [editorCode, setEditorCode] = useState('')

  const onUpdate = EditorView.updateListener.of((v) => {

  useEffect(() => {
    const state = EditorState.create({
      doc: '',
      extensions: [

    const view = new EditorView({ state, parent: editor.current })

    return () => {
  }, [])

  useEffect(() => {
    // tried calling Codemirror.defineMode here, caused error
  }, [codeEditor])

  return <div ref={codeEditor} />

defineMode is a 5.x interface and does not exist in 6.x

Ok thanks, do you have a suggestion of how I should handle my case then?
Can this be done with parser token?