how to update cache after mutation

export function SearchWrapper() {
const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 300);
  const { data: usersList, error, isFetching } = useQuery({
    queryKey: ['searchUsers', debouncedSearchTerm],
    queryFn: () => fetchUsers(debouncedSearchTerm),
    enabled: !!debouncedSearchTerm,
    staleTime: 5000
  });
  const handleInputChange = (e) => {
    setSearchTerm(e.target.value)
  }
<Input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleInputChange}
        />
      </div>
      <UserSearchList debouncedSearchTerm={debouncedSearchTerm} usersList={usersList} />

const UserSeachList  component

<FollowStatusButton
debouncedSearchTerm={debouncedSearchTerm}
usersWithFollowStatus={userWithFollowStatus}
/>
export function FollowStatusButton({ usersWithFollowStatus, debouncedSearchTerm }) {
  const queryClient = useQueryClient();
  const followMutation = useMutation({
    mutationFn: async (userId) => {
      await followUser(userId);
    },
    onMutate: async (userId) => {
      await queryClient.cancelQueries(["searchUsers", debouncedSearchTerm]);
      return { userId }
    }
    onError: (err, userId, context) => {
    },
    onSettled: () => {
      queryClient.invalidateQueries(["searchUsers", debouncedSearchTerm]);
    },
  });
  const handleFollow = (e) => {
    e.preventDefault();
    e.stopPropagation();
    followMutation.mutate(usersWithFollowStatus.user_id);
  };
    <Button
      onClick={(e) => {
        if (usersWithFollowStatus.following) handleUnfollow(e);
        else handleFollow(e);
      }}>
      {usersWithFollowStatus.following ? (usersWithFollowStatus.followed ? "follow back" : "following") : "follow"}
    </Button>

export function SearchWrapper() {
const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 300);
  const { data: usersList, error, isFetching } = useQuery({
    queryKey: ['searchUsers', debouncedSearchTerm],
    queryFn: () => fetchUsers(debouncedSearchTerm),
    enabled: !!debouncedSearchTerm,
    staleTime: 5000
  });
  const handleInputChange = (e) => {
    setSearchTerm(e.target.value)
  }
<Input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleInputChange}
        />
      </div>
      <UserSearchList debouncedSearchTerm={debouncedSearchTerm} usersList={usersList} />

const UserSeachList  component

<FollowStatusButton
debouncedSearchTerm={debouncedSearchTerm}
usersWithFollowStatus={userWithFollowStatus}
/>
export function FollowStatusButton({ usersWithFollowStatus, debouncedSearchTerm }) {
  const queryClient = useQueryClient();
  const followMutation = useMutation({
    mutationFn: async (userId) => {
      await followUser(userId);
    },
    onMutate: async (userId) => {
      await queryClient.cancelQueries(["searchUsers", debouncedSearchTerm]);
      return { userId }
    }
    onError: (err, userId, context) => {
    },
    onSettled: () => {
      queryClient.invalidateQueries(["searchUsers", debouncedSearchTerm]);
    },
  });
  const handleFollow = (e) => {
    e.preventDefault();
    e.stopPropagation();
    followMutation.mutate(usersWithFollowStatus.user_id);
  };
    <Button
      onClick={(e) => {
        if (usersWithFollowStatus.following) handleUnfollow(e);
        else handleFollow(e);
      }}>
      {usersWithFollowStatus.following ? (usersWithFollowStatus.followed ? "follow back" : "following") : "follow"}
    </Button>