Access token validation failed: client id 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 is not authorized to invoke this http trigger – Javascript

I have a teams application created using teams toolkit in vscode that i am working on at the moment.

I have added a Azure function to the application aswell. I can call that function in a local debug. But when i try to call the function after it has been deployed to Azure i am getting this error:

Access token validation failed: client id 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 is not authorized to invoke this http trigger

I have the AAD Application setup as a multitenant app following this guide https://github.com/OfficeDev/TeamsFx/wiki/Multi-tenancy-Support-for-Azure-AD-app

My fetch call looks like this in my code

  const teamsfx = new TeamsFx();
  const accessToken = await teamsfx.getCredential().getToken("");
  const response = await fetch(
    `${process.env.REACT_APP_FUNC_ENDPOINT}/api/POST_request_to_db`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken?.token || ""}`,
      },
      body: JSON.stringify(requestInfo),
    }
  )
    .then((response) => response.json())
    .then((data) => {
      console.log("Success:", data);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

The app is built upon the SSO tabs template.

I am not sure if there is something wrong in the AAD Application or in the token? I tried to run teamsFX both as IdentityType App and User. but nothing works.