"externally_connectable": {
        "matches": [
            "https://*/*"
        ]
    },

    "externally_connectable": {
        "matches": [
            "https://*/*"
        ]
    },

const connected = (p) => {
    console.debug('connected', p)

    p.onMessage.addListener((m) => {
        console.log("In background script, received message from content script");
        console.log(m.greeting);
    });

    setTimeout(() => {
        p.postMessage({ greeting: "hi there content script!" });
    }, 2000)
}
chrome.runtime.onConnectExternal.addListener(connected);

const connected = (p) => {
    console.debug('connected', p)

    p.onMessage.addListener((m) => {
        console.log("In background script, received message from content script");
        console.log(m.greeting);
    });

    setTimeout(() => {
        p.postMessage({ greeting: "hi there content script!" });
    }, 2000)
}
chrome.runtime.onConnectExternal.addListener(connected);

const [current, setCurrent] = useState<HTMLElement>(null);
const ref = useRef<HTMLElement>();

useLayoutEffect(() => {
  setCurrent(ref.current)
})

return (
  <Select ... ref={ref}
    MenuProps={{
      container: current
    }}>
    <MenuItem> ... </MenuItem>
  </Select>
)

const [current, setCurrent] = useState<HTMLElement>(null);
const ref = useRef<HTMLElement>();

useLayoutEffect(() => {
  setCurrent(ref.current)
})

return (
  <Select ... ref={ref}
    MenuProps={{
      container: current
    }}>
    <MenuItem> ... </MenuItem>
  </Select>
)