Issues showing SPFX webpart in teams tab

I am trying to build a Teams tab using an SPFx web part for a demo.

On my inital app the Sync to teams button in the app catalog was failing with this console error being returned...

https://{TENANT}/sites/AppCatalog/_api/web/tenantappcatalog/SyncSolutionToTeams 400

After running into this problem I started again and this time followed the below tutorial step by step but on my tenant the Sync to Teams button is disabled (This step is near in the end in the Making the web part available in Microsoft Teams section)

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

I then tried to follow the alternative method of side-loading the app by creating a manifest manually using this tutorial...

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

This resuted in the installation succeeding as far as the setup tab screen (this provides a preview of your tab in a model popup before adding the tab to a channel)

The result was "Sorry, something went wrong" (This was the end result of side-loading both my customised web part another freshly yo sharepoint generated scaffold.

Really stuck on whether there's a tenant issue or maybe some node package or SPFx version issue.

Any thoughts would be greatly appreciated.

I received a same error from console which led me to this article.

In this case, the app was already synced to Teams store. If that's the case, you should find and remove it by opening Teams -> Apps -> Built for [tenantname]. After removing it here, I am able to successfully sync my app once more.