Issue Tracker Problem - assign issue to user

Next.js
1

I’m using react-query to fetch issues all things work fine with me but when I assign a user to an issue and make a hard refresh the defaultValue in Select.Root doesn’t appear user name but when I go back and open the issue again it appears

here is an AsigneeSelect Component

function AsigneeSelect({ users, issueId }: Props) {
  const queryClient = useQueryClient();

  const { data: issue } = useQuery({
    queryKey: ['issue', { issueId }],
    queryFn: async () => await getSingleIssue(issueId),
  });

  const { mutateAsync: userToIssue } = useMutation({
    mutationFn: async (userId: string) =>
      await assignUserToIssue(issueId, userId),

    onError: () => {
      toast.error("Issue Couldn't be assigned!");
    },

    onSuccess: () => {
      toast.success('Issue has been asigned succesfully');
      queryClient.invalidateQueries({ queryKey: ['issues'] });
    },
  });

  return (
    <>
      <Select.Root
        onValueChange={issueId => userToIssue(issueId)}
        defaultValue={issue?.userId || ''}
      >
        <Select.Trigger placeholder='Assign User for issue...' variant='soft' />
        <Select.Content>
          <Select.Group>
            {users?.map(user => (
              <Select.Item key={user.id} value={user.id as string}>
                <Avatar
                  src={user.image!}
                  fallback='a'
                  radius='full'
                  size='1'
                  className='mr-4'
                />
                <span>{user.name}</span>
              </Select.Item>
            ))}
          </Select.Group>
        </Select.Content>
      </Select.Root>
      <Toaster />
    </>
  );
}

export default AsigneeSelect;