Trying to instantiate Monaco in fresh.deno.dev

Editor.tsx

import { useState, useRef, useEffect } from "preact/hooks";
import { useCSP } from "$fresh/runtime.ts";

const monacoSrc = 'https://esm.sh/v102/monaco-editor@0.34.1/es2021/monaco-editor.js';

export function Editor() {
  useCSP(csp => {
    let scriptSrc = csp.directives.scriptSrc = csp.directives.scriptSrc ?? [];
    scriptSrc.push(monacoSrc);
  });

  let ref = useRef(null);
  let lib = useAsync(() => import(`${monacoSrc}`), [ref]);

  if (lib.type === 'pending') {
    return <h1>Loading</h1>
  } else if (lib.type === 'rejected') {
    return <h1>{String(lib.error)}</h1>
  } else {
    return <h1>Worked: {lib.value}</h1>
  }
}

type AsyncState<T> = {
  type: 'resolved';
  value: T;
} | {
  type: 'rejected';
  error: Error;
} | {
  type: 'pending';
}

function useAsync<T>(fn: () => Promise<T>, deps: unknown[] = []): AsyncState<T> {
  let [state, setState] = useState<AsyncState<T>>({ type: 'pending' });
  useEffect(() => {
    fn()
      .then(value => setState({ type: 'resolved', value }))
      .catch(error => setState({ type: 'rejected', error }));
  }, deps);
  return state;
}

export default Editor;