How do I display folders under public_html in a browser in a deployed react app?

Question

For a simple html-css webpage I could access a folder of music files under the public_html and display those music files in a browser. But now I have used a React App with create-react-app. How do I access a folder I have put on a server under public_html like so public_html/songs/? Current behavior when I try to hit an endpoint like mysite.com/songs in a browser, it just displays React App home page regardless of the URL address, which in essence is mysite.com

Answer 1

So the issue was that my .htaccess file was configured to redirect all requests for files that are perceived to not exist to index.html:
I was initially like so:

Options -MultiViews
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Now I changed it to this:

Options -MultiViews
    RewriteEngine On
    
    # Serve existing files directly
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ - [L]

    # Redirect all other requests to index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]