NextJS - HSTS is not applied in root domain

Question

I add HSTS configuration in my next.config.js with the following detail,

module.exports = () => {
  ....

  return withBundleAnalyzer(
    withGraphql({
      reactStrictMode: true,
      i18n,
      experimental: {
        externalDir: true,
      },
      poweredByHeader: false,
      async headers() {
        if (!isDev) {
          return [
            {
              source: '/(.*)',
              headers: [
                {
                  key: 'Strict-Transport-Security',
                  value: 'max-age=31536000; includeSubDomains; preload',
                },
              ],
            },
          ]
        }

        return []
      },
    })
  )
}

I expected all routes include root will give response with header Strict-Transport-Security. However, only the root domain that doesn't return response with that header. Can someone point out how to fix it?

Thank you