Next Js shows index page content on refresh dynamic page URL

Here below is my next.config.js file:

module.exports = {
  trailingSlash: true,
  reactStrictMode: true,
  PAGE_LIMIT:3,
  env: {
    BASE_URL: process.env.BASE_URL,
    TOKEN: process.env.TOKEN
  }
}

Project pages structure is as follows:

When I refresh the inner dynamic URL page https://example.com/settings/locations/edit/xxxxxxx-xxxxx-xxx-xx-xxxxxxx/

then It shows the content of the index page without changing the URL on addressBar in the browser.

Earlier I was getting the same issue on https://example.com/networkdevices/ but after using trailingSlash: true, in next.config.js that issue was resolved.

But this time issue is coming on all those specific URLs on which we have a dynamic Id of resources.

It is working fine on the localhost, only making such issues on the server. Here below is my .htaccess file code:

### ISPConfig folder protection begin ###
AuthType Basic
AuthName "Members Only"
AuthUserFile /var/www/web119/web/.htpasswd
require valid-user
### ISPConfig folder protection end ###

<IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteBase /

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

from Next Js shows index page content on refresh dynamic page URL