Render a component in HTML page

I have a react CookieBanner component in the app /src and I would like to render this component in an HTML page placed in the Public folder. The component is working with the normal App.js and it rendered, I would like to have the same component in static HTML pages in the Public folder.

Here are my routes.js

class Routes extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <HelmetMetaData />
            <Switch>
                <Route exact path="/" render={() => {window.location.href="Home.html"}} />
                <Route path="/Main" component={App}/>
                <Route path="/About" render={() => {window.location.href="About.html"}}/>
                <Route path="/impressum" render={() => {window.location.href="impressum.html"}}/>
                <Route path="/blog" render={() => {window.location.href="blog.html"}}/>
                <Route path="/Questions" render={() => {window.location.href="Questions.html"}} />
                <Route path="/Answers" render={() => {window.location.href="Answers.html"}} />
                <Route path="/info" render={() => {window.location.href="info.html"}} />
                <Route component={Error}/>
            </Switch>
            </div>
        );
    }
};
export default Routes;

CookieBanner.js

import ReactDOM from "react-dom";
import React from "react";
import CookieConsent from "react-cookie-consent";

class CookieBanner extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showCookie: false,
        };
    }

    componentDidMount() {
        setTimeout(function () { //Start the timer
            this.setState({showCookie: true}) //After 1 second, set render to true
        }.bind(this), 800)
    }

    render() {
        return (
            <div>
            {
                this.state.showCookie && (
                    <CookieConsent
                        // debug={true}
                        location='bottom'
                        buttonText='Akzeptieren'
                        declineButtonText='Ablehnen'
                        enableDeclineButton
                        flipButtons={true}
                        cookieName='<cookieName>'
                        style={{background: "rgb(170, 165, 163)", padding: '0.2rem'}}
                        overlayStyle={{zIndex: '9999'}}
                        buttonStyle={{
                            color: 'rgb(255, 255, 255)',
                            fontSize: '16px',
                            backgroundColor: 'rgb(112, 173, 71)'
                        }}
                        declineButtonStyle={{color: 'rgb(192, 0, 0)', borderColor: 'transparent', backgroundColor: 'none', border: 'none', background:'transparent'}}
                        expires={150}
                        overlay>
                        {/*// onAccept={() => {*/}
                        {/*//     alert("Accept was triggered by clicking the Accept button");*/}
                        {/*// }}*/}
                        {/*// onDecline={() => {*/}
                        {/*//     alert("nay!");*/}
                        {/*// }}*/}
                       this is a cookie
                        <span style={{fontSize: '16px'}}>
                        <a style={{display: 'inline-block', padding: '0.2rem', textDecoration: 'underline'}}
                           role="button" href="/datenSchutz">More information</a>
                    </span>
                    </CookieConsent>)
            }
            </div>
        );
    }
}

ReactDOM.render(<CookieBanner />, document.getElementById("banner"));