Cant figure out function overloads

[smoky warren]

This is my function overload:

export default function useStorageLocation(
  props: FilterByIdUseStorageLocationProps,
): FilterByIdUseStorageLocationReturnType;
export default function useStorageLocation(
  props: FilterByWBayIdUseStorageLocationProps,
): FilterByWBayIdUseStorageLocationReturnType;
export default function useStorageLocation(
  props: FilterByLocationIdUseStorageLocationProps,
): FilterByLocationIdUseStorageLocationReturnType;
export default function useStorageLocation({
  enabled,
  filterBy,
  extraData,
}: UseStorageLocationProps): UseStorageLocationReturnType {}

This is what I provide to it:

const {
    data: storageLocations,
    deleteStorageLocation,
    createStorageLocation,
    refetchSorageLocations,
  } = useStorageLocation({
    enabled: !!currentlyViewingArea,
    filterBy:
      currentlyViewingArea!.type === WarehouseAreaType.BAY
        ? { byWBayId: currentlyViewingArea!.id }
        : { byId: currentlyViewingArea!.id },

if i use just { bayId: currentlyViewingArea!.id } for example, it works, but with ternary doesnt