useProfile seems to use the most recently received event, rather than the most recently created event.

I noticed this behavior when trying to create a profile page with my picture on it.

export default function Profile() {
  const router = useRouter();
  const { pubkey } = router.query;

  const { data: userData } = useProfile({
    pubkey,
  });

  return (
    <>
      <Avatar
        src={userData?.picture}
        alt={userData?.name}
        size={42}
        radius="50%"
      />
      <Text size="lg" color="white">
        {userData?.display_name
          ? userData.display_name
          : `@${pubkey.substring(0, 5)}...`}
      </Text>
    </>
  );
}

The picture would initially load as my current picture, then after a few seconds switch to an old profile pic I used. This can be resolved by always setting userData to the event with the most recent created_at time.

Perhaps in useProfile, before executing setFetchedProfiles, we need to check whether fetchedProfiles[pubkey] already exists; if so, look at created_at to decide whether to update it or not.