Cannot 'AssumeRoleWithWebIdentity' for Unauthorized User API access AWS Identity Pool

Question

Error:-

invalid identity pool configuration. check assigned iam roles for this pool. x-amzn-errortype: invalididentitypoolconfigurationexception

---

My Identity Pool Screenshot:-

---

I have both a Cognito user pool for Admin and Guest users, as well as an identity pool so that unauthorized users of my app can still access information via GraphQL API. I have no problems logging into the web page with admin/guest accounts and executing queries via the GraphQL - But the issue occurs when I am not logged into a user. It appears the unauthorized user is not assuming the role that it has been given to access the API.

Error: No current user
    at GraphQLAPIClass.<anonymous> (GraphQLAPI.ts:177:1)
    at step (tslib.es6.js:100:1)
    at Object.throw (tslib.es6.js:81:1)
    at rejected (tslib.es6.js:72:1)

I have looked at almost every article on this topic I can find and most people have found a solution by adding conditions to the Trust Relationships for the role that is attached to the unauthenticated user like so (this is my current Trust Relationship):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "",
            "Effect": "Allow",
            "Principal": {
                "Federated": "cognito-identity.amazonaws.com"
            },
            "Action": "sts:AssumeRoleWithWebIdentity",
            "Condition": {
                "StringEquals": {
                    "cognito-identity.amazonaws.com:aud": "us-west-1:446b4ede-a10f-4c5c-9eda-12a34413a72b"
                },
                "ForAnyValue:StringLike": {
                    "cognito-identity.amazonaws.com:amr": "unauthenticated"
                }
            }
        }
    ]
} 

When I have a look at my Identity Pool dashboard, it shows that there are 0 new identities, which means that when I open the app the role is not being assigned properly to the unauthenticated user. I have searched all over trying to figure out what is causing this issue and now I'm starting to think it might be a problem with AWS. The really weird thing is that it actually worked very briefly with my existing trust policy, but then I tried it again and it stopped working, and I didn't change a single thing. I am using serverless to deploy my app. I've tried to explain this issue thoroughly but please let me know if there are any details missing.

I've spent many hours trying to fix this so any help would be greatly appreciated.

Index.js for react app:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import { Amplify } from "aws-amplify";

Amplify.configure({
  Auth: {
    region: "us-west-1",
    userPoolId: "us-west-1_PTV4XSYqN",
    userPoolWebClientId: "529dhbcrddljgs1voc9ql0mc8h",
    mandatorySignIn: false,
    identityPoolId: "us-west-1:28f10da7-3899-4502-8420-64a0d9e29689",
  },
});

const myAppConfig = {
  aws_appsync_graphqlEndpoint:
    "https://kfdxj53fknfh7lyfrdtjizmd3m.appsync-api.us-west-1.amazonaws.com/graphql",
  aws_appsync_region: "us-west-1",
  aws_appsync_authenticationType: "AMAZON_COGNITO_USER_POOLS",
};

Amplify.configure(myAppConfig);

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);