Fetching from API alongside default value

[stychu]

I have a Select component where I need to display options for the select alongside the defaultValue if provided all from API. I wonder if there is a better approach than I did here for retrieving the defaultValue if id is present alongside the options for the Select.

const useParentLocationSearch = (search = '', enabled: boolean) => {
  const { data, isFetching } = api.location.findLocations.useQuery(
    { search: search },
    {
      enabled,
      throwOnError: false,
      placeholderData: keepPreviousData,
      select: ({ locations }) =>
        locations.map(({ location }) =>
          dataFactory({
            value: location.id,
            label: location.name,
          }),
        ),
    },
  );

  return { data: data || [], isFetching };
};

export const ParentLocation = (props: ComponentProps<typeof Select>) => {
  const { formState, resetField, control } = useFormContext();
  const [search, setSearch] = useDebounceValue('', 500);

  const { locationDetails: { parentId, type }  } = formState.defaultValues

  const defaultAsyncValue = useParentLocationSearch(
    parentId?.value,
    props.visible && !!parentId,
  );
  const options = useParentLocationSearch(search, props.visible);
  const isLoading = defaultAsyncValue.isFetching || options.isFetching;

  useEffect(() => {
    if (parentId && defaultAsyncValue.data.length) {
      resetField(props.name, { defaultValue: defaultAsyncValue.data[0] });
    }
  }, [defaultAsyncValue.data]);

  return (
    <Select
      {...props}
      filterOption={null}
      options={options.data}
      isLoading={isLoading}
      onInputChange={setSearch}
      visible={visible}
      disabled={props.disabled || isLoading}
    />
  );
};

Unfortunate that react-qeuery dropped the onSuccess for useQuery hooks as it would simplify this code from that ugly useeffect. Or Am I missing something here?

P.S.
My stack: tRPC, Nextjs, React-Select, React-hook-from