Displaying Apple Smart Banner on certain pages only in Next.JS

Question

We're trying to display the Apple Smart Banner on some pages (let's call them page A for simplicity) but not on all of them (as of now we only support Universal Linking on some pages only). So we added this code snippet to these pages:

{isBannerPromotionActive && config.APPLE_APPSTORE_ID && (
     <meta
       name="apple-itunes-app"
       content={`app-id=${config.APPLE_APPSTORE_ID}, app-argument=${deepLink}`}
       key="smart-banner"
     />
)}

However, we're seeing the following behavior in iOS on Safari:

• If the user goes straight to page A (e.g. from google goes to mysite.com/page_a) then the banner appears as expected. Although the banner remains visible all the time if the user navigates to any other page, even though that page doesn't have the banner meta tag in its source.
• If the user goes to the homepage (e.g. goes to mysite.com) and then navigates to page A then the banner is not visible.

Any idea why is this happening and how can we sort this out?