React App on S3 and CloudFront - Navigation Bar Clicks Not Rendering Content

Hello,

I have a React application hosted on Amazon S3 as a static web page, and it's connected to a CloudFront web distribution that routes traffic to an S3 endpoint.

However, I'm facing an issue with the navigation bar/items in my app. When I click on the menu items, nothing happens. The page content doesn't render. Strangely, if I manually reload the page or enter a link into the browser and hit enter, the page loads correctly with the content displayed.

I've diligently checked the browser's developer console for error messages, but it doesn't provide any clues as to what might be causing this problem.

Have you encountered a similar issue before, or do you have any insights into what might be causing it? It's worth noting that the frontend works perfectly when running locally outside of S3 and CloudFront.

This is the main settings configurations:

Origins configurations:

Behaviors configurations:

Error page configurations:

I enabled website hosting on the S3 bucket.

My react application in S3 Bucket:

Thank you very much.