SPFx in Teams tab not rendering until browsed to in spo

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• MacOS Teams Desktop Client

Describe the bug / error

I have a custom Teams personal app that has two tabs: one tab surfaces an spfx webpart, while the other a React SPA provisioned and deployed using the Teams Toolkit. After a couple days of not browsing to the custom Teams app, however, the tab that surfaces the SPFx component is stuck on a spinner -- the other tab has no problems. The console gives me the following error:
App resource defined in manifest and iframe origin do not match
failureCallback @ TeamsLogon.aspx?SPFX...rceLocale=en-us:240

In order to get the spfx tab to render I have to do the following in Chrome and Edge:
browse to a SharePoint page with the webpart and then refresh the static tab in Teams

On the Teams Desktop client I added a reference to the SharePoint page in a Teams Channel and after browsing to that Teams channel tab I can then see the spfx component in the custom app's spfx tab

Steps to reproduce

• Create 3 webparts: a search webpart, a directory webpart, and a faculty webpart that references the two main components of the search and directory webparts. For example, the FacultyWebpart.tsx will render the Faculty.tsx component, whose function is to render the Search.tsx and Faculty.tsx components.
• Create your own teams manifest.json file in the teams folder of the SharePoint solution, so that when you deploy the sppkg it knows which webpart to make available in Teams
• Create a Fluent UI Personal app using the Teams Toolkit
• In the manifest.json inside the appPackage folder, create two static tabs: one that references the spfx webpart to be served and the other tab for the React app provided by Teams Toolkit
• Provision, Deploy, and send to Production

Expected behavior

I shouldn't have to browse to the SPO page with the spfx webpart to then see it in the custom Teams app