Adding content script will make pointer-events: none (chrome extension)

Question

I'm developing a chrome extension for google docs, but once I add the content script in manifest.json, all the pop-up windows in google docs like 'sharing' and 'word counts' will have 'pointer-events:none' and go behind the 'modal-dialog-bg'.

"content_scripts": [
{
  "matches": ["https://docs.google.com/document/d/*"],
  "js": ["contentScript.bundle.js"],
  "css": ["content.styles.css"],
  "run_at": "document_end"
}
],

enter image description here

The code in the content script is as follows:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div></div>
  );
};

const showApp = () => {
    let body = document.getElementsByTagName('body')[0];
    const app = document.createElement('div');
    body.appendChild(app);
    ReactDOM.render(<App />, app);
  }
};

I have been working on this problem for a while but can't find a solution. Please tell me if there are any ideas for this. Thanks in advance.