IOS Full Screen App: why does toolbar appears when page changes?

I inherited a React web app that is meant to be used as a full screen app on mobile devices in Safari IOS. You can make the app full screen and hide the address bar by doing the following:

1. Open the app in safari (https://app.1wsq.com)
2. Tap button on bottom toolbar
3. "Add to Home Screen"

This adds an icon on the home screen and when you tap it it opens the app in full screen. However, when you navigate to another page on the site the following toolbar appears:

This toolbar is not the normal address bar, it seems to be an accessibility toolbar. I am not sure what is causing it to appear.

Stack question I have looked at:

How do you keep an iPhone/iPad web app in full screen mode? — This question seems to be geared toward a multi-page application and the suggested hacks for the links doesn’t apply to a React SPA that uses react-router-dom for navigating across pages.

Things I have tried:

I have the following meta tag on the web app:

<meta name="apple-mobile-web-app-capable" content="yes">

{
  "name": "1WSQ",
  "short_name": "1WSQ",
  "description": "1WSQ APP",
  "display": "fullscreen",
  "start_url": "/?homescreen=1",
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [
    {
      "src": "touch-icon-ipad-retina.png",
      "sizes": "167x167",
      "type": "image/png"
    }
  ]
}