Cannot connect React to Graphene using GraphQL - reactjs

Question

So create graphene query and works on GraphiQL, I'm trying to connect it to react using apollo client but I keep getting error.
On Django the error is
graphql.error.located_error.GraphQLLocatedError: 'AnonymousUser' object is not iterable
on React the error is Error! 'AnonymousUser' object is not iterable
As you can see here, it's working on GrahiQL
Here is my setup
URL
path("graphql/", csrf_exempt(GraphQLView.as_view(graphiql=True))),
SETTINGS
CORS_ORIGIN_WHITELIST = [
"http://localhost:3000",
"http://127.0.0.1:3000"
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
....
]
INSTALLED_APPS = [
.....
"graphene_django",
'corsheaders',
]
INDEX.JS
import React from "react";
import { ApolloProvider, ApolloClient, InMemoryCache } from "#apollo/client";
const client = new ApolloClient({
uri: "http://localhost:8000/graphql/",
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);
In EMPLOYEELIST.JS
import { useQuery, gql } from "#apollo/client";
const EMP = gql`
query getEmployees {
allEmployees {
id
fullName
isActive
hourlyRate
slug
paystubData
}
}
`;
export const ListEmployee = () => {
const { loading, error, data } = useQuery(EMP);
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
const [records, setRecords] = useState(data.allEmployees);
...
return(
.....)
I tested the react component with localstorage first and everything was fine there too, now bring the two together, I'm getting this error. I don't know what I'm missing here really.
Any help will be appreciated.