"Composite" components with value derived from/setting value of multiple fields in form

[rikbrown]

What's the best pattern for deriving state from multiple fields, and updating them both?

My use case is a form like this:

type Form {
  listingType: 'BUY_NOW' | 'AUCTION',
  offersEnabled: boolean // only applicable to BUY_NOW
}

I'm rendering two controls in two places:

1. A top-level control which allows selecting between "buy now", "buy now with offers" (as you can imagine, this is a combo of listingType = BUY_NOW and offersEnabled = true), and "auction".
2. A toggle control for offers, deeper in the form, which only appears when listing type is one of the two buy now ones.

If I change the drop down between those two, I want to update both. And conversely, if I update the toggle I want the dropdown to reflect

I have this, is there a better way? (I could also nest two <form.Field> but this seemed cleaner as this is in a dedicated component
(code isn't exact, redacted/simplified some bits for the discussion):

function ListingTypeDropdown() {

  const items = ...; // assume contains `offers`, `buyNow` and `auction` items

  const {
    state: { value: listingType },
    handleChange: handleListingTypeChange,
  } = form.useField({
    name: 'listingType',
  })

  const {
    state: { value: isOfferEnabled },
    handleChange: handleIsOfferEnabledChange,
  } = form.useField({
    name: 'offersEnabled',
  })

  // selects the right internal key for the items in my dropdown
  const selected = match(listingType)
    .with('BUY_NOW', () => (isOfferEnabled ? ('offers' as const) : ('buyNow' as const)))
    .with('AUCTION', () => 'auction' as const)
    .exhaustive()

  return (
    <Dropdown
      value={selected}
      items={items} 
      onChange={(value: typeof selected) => {
        handleListingTypeChange(
          match(value)
            .with(P.union('buyNow', 'offers'), () => 'BUY_NOW' as const)
            .with('auction', () => 'AUCTION' as const)
            .exhaustive()
        )

        handleIsOfferEnabledChange(value === 'offers')
      }}
    />
  )
}