SWC-6552 - Fix UserOrTeamBadge showing stale data

`UserOrTeamBadge` provides two 'interfaces' so the userGroupHeader data can be either provided or fetched. This bug only occurred when data was fetched, but the faulty logic existed to manage both scenarios.

The data was stored in `useState`. Due to incorrect logic in an effect, the data was NOT updated when the fetched data changed due to the `principalId` changing.

We can remove the effect and just pick the correct object inline and the bug is resolved.

packages/synapse-react-client/src/components/UserOrTeamBadge/UserOrTeamBadge.tsx

@@ -1,7 +1,6 @@
 import { Skeleton } from '@mui/material'
-import React, { useEffect, useState } from 'react'
-import { useGetUserGroupHeader } from '../../synapse-queries/user/useUserGroupHeader'
-import { useSynapseContext } from '../../utils/context/SynapseContext'
+import React from 'react'
+import { useGetUserGroupHeader } from '../../synapse-queries'
 import { UserGroupHeader } from '@sage-bionetworks/synapse-types'
 import TeamBadge from '../TeamBadge'
 import { UserBadge } from '../UserCard/UserBadge'
@@ -29,23 +28,14 @@ export default function UserOrTeamBadge(props: UserOrTeamBadgeProps) {
     principalId = providedUserGroupHeader?.ownerId
   }
 
-  const { accessToken } = useSynapseContext()
-  const [userGroupHeader, setUserGroupHeader] = useState<
-    UserGroupHeader | undefined
-  >(providedUserGroupHeader)
-
   const { data: fetchedUserGroupHeader } = useGetUserGroupHeader(
     (principalId ?? '').toString(),
     {
       enabled: !providedUserGroupHeader,
     },
   )
 
-  useEffect(() => {
-    if (principalId && userGroupHeader == undefined && fetchedUserGroupHeader) {
-      setUserGroupHeader(fetchedUserGroupHeader)
-    }
-  }, [accessToken, principalId, userGroupHeader, fetchedUserGroupHeader])
+  const userGroupHeader = providedUserGroupHeader ?? fetchedUserGroupHeader
 
   if (principalId == null && providedUserGroupHeader == null) {
     console.error(