Extension: How to resolve the errors `Uncaught Error: Extension context invalidated` and `Warning: React.jsx: type is invalid -- expected a string`?

Question

I'm using React, Typescript, Plasmo, and MaterialUI to develop a Chrome extension. I continued to receive the following errors even after commenting out code for the popup, background and content script, and options page:

Error 1: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Error 2: Uncaught Error: Extension context invalidated.

Please check out the error image here](https://i.stack.imgur.com/B7OrZ.png)

What am I trying to achieve?

I need users' permission to access their microphones for audio capture. If permission is blocked but they still want to record, clicking the record button will prompt a permission modal.

Content.tsx

import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import PermissionModal from "./components/PermissionModal";

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.action === "showPermissionModal") {
        setIsModalOpen(true);
        sendResponse({ status: "success", message: "Modal displayed" });
      }
    });
  }, []);

  return (
    <div>
      <PermissionModal
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      />
    </div>
  );
};

const rootElement = document.createElement("div");
document.body.appendChild(rootElement);
const root = createRoot(rootElement);
root.render(<App />);

PermissionModal.tsx

import React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Button from "@mui/material/Button";

interface Props {
  open: boolean;
  onClose: () => void;
}

const PermissionModal: React.FC<Props> = ({ open, onClose }) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        {"Microphone Permission Required"}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          Microphone access is denied. Please manually enable it in your browser
          settings.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default PermissionModal;

permissions.ts

const requestMicrophonePermission = async (): Promise<MediaStream> => {
  return new Promise((resolve, reject) => {
    navigator.mediaDevices
      .getUserMedia({ video: false, audio: true })
      .then((stream) => {
        // window.localStream = stream;
        resolve(stream);
      })
      .catch((err) => {
        console.error(`You got an error: ${err}`);

        // Send message to content script to show the custom dialog
        chrome.tabs.query(
          { active: true, currentWindow: true },
          function (tabs) {
            const tab = tabs[0];
            if (tab.id != undefined) {
              chrome.tabs.sendMessage(tab.id, {
                action: "showPermissionModal",
              });
            }
          }
        );

        reject(err);
      });
    console.log("Testing from permissions.ts");
  });
};

export default requestMicrophonePermission;

It seems that the React.jsx type error is related to mixing default exports with named exports, and the Extension context invalidated is due to the orphaned script after the Chrome extension update. I have tried the suggestions from this post to disconnect, as well as make sure all exports' syntax is correct. At this point, I don't know what else I can do. Please help!!