Amplify and React App: Access Denied

I created a React app that I want to deploy to AWS Amplify. I use automatic deployment through GitHub. The problem is that I get access denied error when I visit a specific URL path, other than the root path of the web app. For example, visiting example.com/some-url will cause an "AccessDenied" error.

It seems that this is a common issue with Amplify and SPAs, and people set up redirects to index.html like so:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

However, this is not a solution for me, or at least is not working I want to, since I want users to access specific page paths directly.

My react-router-dom code which handles the redirects looks something like this:

return ( 
    <React.Fragment>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={
                    <React.Fragment>
                        <Index />
                    </React.Fragment>
                } />

                <Route path="some-url" element={
                    <React.Fragment>
                        <SomethingElse/>
                    </React.Fragment>
                } />
               </Routes>
           </React.Fragment>
        </BrowserRouter>
   </Routes>

Setting up a redirect to index.html as the documentation suggests causes all requests to just land to index.html which my React app only renders a blank page.

Any help will highly be appreciated.