I get the error "Unrecognized extension value in extension set ([object Object])." setting highlighting language using @codemirror/lang-javascript?

Question

I'm trying to set a highlighting language for JavaScript in CodeMirror by importing @codemirror/lang-javascript and adding it to the extensions array, but I keep getting the error "Uncaught (in promise) Error: Unrecognized extension value in extension set ([object Object])."

I realize there is a question with a similar title here but I think the cause and solution is a different one, hence, a different question.

Here is the code that is causing the error: (Code is inspired by the docs)

CodeMirror(
      `console.log('hello');
    1+2`,
      {
        extensions: [myDefaultTheme,/*javascript() //error*/]
      }
    );

So because I really want to make this problem reproducible, this is a snippet that works, that can be used to reproduce the problem. This is the working code. I just want to enable syntax highlighting.

CODEMIRROR_VERSION = "^6.0.1";
esmImport = pkg => import(`https://cdn.skypack.dev/${pkg}`);
esmCodeMirror = (mod) =>
  esmImport(
    "@codemirror/" +
    (mod.indexOf("@") >= 0 ?
      mod : `${mod}@${CODEMIRROR_VERSION}`)
  );
loadCodeMirrorModules = async entries => {
  const repo = Object.create(null)
  const loadToRepo = async key => {
    const module = await esmCodeMirror(key)
    repo[key] = module
  }
  await Promise.all(entries.map(loadToRepo))
  return repo
}

loadCodeMirrorModules([
  "view",
  "state",
  "language",
  "commands",
  "search",
  "autocomplete",
  "lang-javascript"
]).then(async cmImports => {
  let myDefaultTheme = cmImports.view.EditorView.theme({
    '&': {
      fontFamily: 'Consolas, "Roboto Mono", monospace',
      fontSize: '14px',
      height: '200px',
      border: '1px solid #ddd',
    },
  })
  let CodeMirror = async (doc = "", config = {}) => {
    const extensions = config.extensions ?? [];
    const keymaps = config.keymaps ?? [];

    const {
      highlightSpecialChars,
      keymap,
      drawSelection,
      highlightActiveLine
    } =
    cmImports.view;
    const {
      Prec
    } = cmImports.state;
    let state = cmImports.state.EditorState.create({
      doc,
      extensions: [
        cmImports.view.lineNumbers(),
        highlightSpecialChars(),
        drawSelection(),
        highlightActiveLine(),
        keymap.of([
          ...cmImports.commands.defaultKeymap,
          ...cmImports.search.searchKeymap,
          ...keymaps
        ]),
        ...extensions
      ]
    });
    const view = new cmImports.view.EditorView({
      state
    });
    const el = view.dom;
    el.value = view.state.doc.toString();
    return el;
  };
  let javascript = cmImports['lang-javascript'].javascript;
  let d = await CodeMirror(
    `console.log('hello');
1+2`, {
      extensions: [myDefaultTheme]
    }
  );
  document.body.insertBefore(d, document.body.firstChild);
})

Is there something I'm missing or doing wrong in my implementation? Any help would be greatly appreciated.