Permission issues with Web App connecting to Key Vault

Question

When deploying our web app application, we knew that we wanted to import certificates to web app from Key vault. However, we've managed to get a lot of issues along the way and wanted to see if there is someone else who has run in to the same issues and have some feedback/helpful ways to move forward.

First things first:
Deployment method: Bicep w. service principal
Permission Model Key Vault: Access Policy
Applications: Web App (Linux, App Service plan) & Key Vault

First time we tried to deploy, we got into the issue where our only error was:

The service does not have access to '/subscriptions/<our-subscription>/resourcegroups/<our-resource-group>/providers/microsoft.keyvault/vaults/<our-keyvault>' Key Vault. Please make sure that you have granted necessary permissions to the service to perform the request operation.

When looking online we stumbled onto another MS thread that had this exact issue (see issue here) and we switched from using RBAC permission model to using Access Policy instead.
Even though we switched to access-policy and assigned our managed identity to the kv , we still couldn't get it to work.
Then we tried with Assigning 'Microsoft Azure App Service' role, which makes the workflow work. The only trouble we have with this is that we have to assign the role manually in the Azure platform and not by using Bicep.

Whenever we've tried to create an access policy using the id for 'Microsoft Azure App Service' (abfa0a7c-a6b6-4736-8310-5855508787cd), we only get it to show up like picture below and "unknown" (which in turn results in us not being able to add certficate to web app from key vault.

Has anyone experienced the same issue or have a workaround for this?

Since this is a complicated workflow we want to make sure that we can document as much as possible in our code.