Autocomplete and method descriptions for imported packages in monaco-editor/react

Question

I am trying to add an in-browser IDE to a React app using @monaco-editor/react. Within the code editor I want users to be able to import Playwright and I want autocomplete and syntax highlighting to be correct for the various Playwright functions and types. No matter what I try I cannot get this to work. I cannot even get the editor element to not mark the import of Playwright as an error.

Within this code snippet codeTemplate is just a set of placeholder code for the editor, and ../../frameworkType/playwright.d.ts is a file housing the types file from when you install playwright-core.

import Editor, { EditorProps } from "@monaco-editor/react";
import { Box } from "@mui/material";
import { useRef } from "react"
import { codeTemplate } from "../../constants/constants";

// eslint-disable-next-line import/no-webpack-loader-syntax
const playwrightTypings = require("!!raw-loader?esModule=false!../../frameworkTypes/playwright.d.ts");


export const CodeEditor = ({ ...props }: EditorProps) => {
    const monacoRef = useRef(null);

    const types = [
        { name: "playwright", types: playwrightTypings },
    ];

    const handleEditorWillMount = (monaco: any) => {
        types.forEach(module => {
            monaco.languages.typescript.javascriptDefaults.addExtraLib(
                `declare module "${module.name}" {
                    ${module.types}
                }`
            )
        });
    };

    const handleEditorDidMount = (editor: any, monaco: any) => {
        monacoRef.current = editor;
    };
    
    return (
        <Box display="flex">
            <Editor
                height="45vh"
                width="100%"
                language="typescript"
                theme="vs-dark"
                defaultValue={codeTemplate}
                beforeMount={handleEditorWillMount}
                onMount={handleEditorDidMount}
                {...props}
            />
        </Box>
    );
}

Any advice would be massively appreciated. I've been banging my head against it for days.

I have built my attempted solution based off of these two resources but have had no luck.

install packages and get autocompletion on Monaco editor react

https://blog.checklyhq.com/customizing-monaco/