Deploy React JS project in AWS S3 without involved AWS CDN

Question

Is it possible to host React JS/ Node JS project inside the AWS S3 without using AWS CDN because my CDN is currently hosted at Cloudflare and it can be a problem to migrate my DNS to AWS DNS. I have attempted to setup a AWS S3 bucket and set it as static hosting purpose and generate production build from my React JS project. But I keep enouncter access denied error when I accessed the generated AWS S3 bucket hostname. May I know how can I resolve this?

I have followed this resource.

But my React App still not working properly. If it is working properly, it should redirect me to https://s3.hosting.com/ with present the view that I specify in the react router.

Below are my code snippet for index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

let app = document.getElementById('root');

history.listen(location => {
    const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
    if (path) {
      setTimeout(() => {
        history.replace(path);
      }, 100);
    }
});
      // 2. Render our app
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,app);
reportWebVitals();

Below are my code snippet for App.js

import './react-datepicker.css';
import './App.css';
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ViewOrder from "./components/vieworder";
import CreateOrder from './components/createorder';
import ViewAllOrder from "./components/viewallorder";
import ViewRestaurant from "./components/restaurant";
import ViewBranches from "./components/branch";
import ViewBranchOrder from "./components/viewbranchorder";
import ViewAllConsumer from './components/consumer';
import Auth from "./components/auth";
import Profile from "./components/profile";
import ViewTransaction from "./components/transaction";
import ViewAccessToken from "./components/viewaccesstoken.js";
import NotFoundPage from "./components/notfoundpage";
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

class App extends Component {
  render(){
    return (
      <Router>
          <Switch>
            <Route exact path="/auth" component={Auth} />
            <Route exact path="/" component={Auth} />
            <Route exact path="/order" component={ViewAllOrder} />
            <Route exact path="/transaction/user/:userId" component={ViewTransaction} />
            <Route exact path="/token/:userId" component={ViewAccessToken} />
            <Route exact path="/transaction" component={ViewTransaction} />
            <Route exact path="/order/v/:orderId" component={ViewOrder} />
            <Route exact path="/storeFront/:storefrontToken/order/create" component={CreateOrder} />
            <Route exact path="/consumer" component={ViewAllConsumer}/>
            <Route exact path="/restaurant" component={ViewRestaurant}/>
            <Route exact path="/profile" component={Profile}/>
            <Route exact path="/profile/:uid" component={Profile}/>
            <Route exact path="/ViewBranches" component={ViewBranches}/>
            <Route exact path="/restaurant/:restaurantId/branch" component={ViewBranches}/>
            <Route exact path="/restaurant/:restaurantId/branch/:branchId/:branchName/order" component={ViewBranchOrder}/>
            <Route exact path="*" component={NotFoundPage}/>
            </Switch>
      </Router>  
    );
  }
}

export default App;