How to insert a html element (JSX) to the DOM with content script in a React Chrome extension?

First I want to say that a found some answers for my question, but they are to old and cannot help me.

I created a simple React app with intention to use it as a Chrome extension.

Node.js v18.15.0 / React 18.2.0

npx create-react-app my-extension

I set the manifest as sugested by the Google doc.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.1",
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "Test.js"
      ]
    }
  ]
}

I added a simple content script to insert a html element to the DOM everytime a page is loaded.

Test.js

var p = document.createElement("p")
p.innerText = "text"
var body = document.querySelector("body")
body.appendChild(p)

It works fine, but what I want is add to the DOM this same element provided by a react component like this:

Test.jsx

function Test() {
    return (
        <p>text</p>
    )
}
export default Test

I cannot find a way to configure the environment to do the content script works with the react component.

Does anyone know how to do this or can suggest a solution? Grateful.