Error "You forgot to wrap your component in " auth0

Question

I have this problem with Auth0. The thing is that I am using Astro and integrated React to use a login and logout with Auth0. I will show you all the code I have and try to explain it to you to see if you can help me.

this is a auth.jsx

import React from "react";
import ReactDOM from "react-dom";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

ReactDOM.render(
  <Auth0Provider
    domain="dev-4zv7m442pt5chyhf.us.auth0.com"
    clientId="VpYTVz16tZ9gswpbDTrPl4BmiVPnsskB"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

this is a App.jsx

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const App = () => {
  const { loginWithRedirect } = useAuth0();

  return (
    <div>
        <h2>AppLogin</h2>
            <button onClick={() => {console.log('click'); loginWithRedirect()}}>Log In</button>
    </div>
    );
}

export default App;

and this on a page .astro

---
import App from "../utils/App";
---

<App client:load />

I just want this to work and when I click the button it takes me to the authentication page