How to generate select options dynamically based on a sibling field?

[mikeploythai]

I have a collection with two fields: "tiers" and "deliverables". The idea I have is for the user to create tiers, and those new tiers would populate the options field of a select input I have in the "deliverables" on save.

I was thinking about using the afterChange collection hook to fetch the newly saved tiers and update the select options using them, but I'm not able to update the select input like that. Any alternatives I can approach?

EDIT: I'm also considering creating a custom server component with a nested client component, but I wanna see if it's possible via the hook first

// my current idea

export const Services: CollectionConfig = {
  slug: 'services',
  fields: [
    {
      name: 'tiers',
      type: 'array',
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
        },
        {
          name: 'description',
          type: 'richText',
        },
      ],
    },
    {
      name: 'deliverables',
      type: 'array',
      fields: [
        {
          name: 'name',
          type: 'text',
          required: true,
        },
        {
          name: 'tiers',
          type: 'select',
          options: [],
        },
      ],
    },
  ],
  versions: {
    drafts: {
      autosave: {
        interval: 375,
      },
    },
    maxPerDoc: 50,
  },
  hooks: {
    afterChange: [
      async ({ doc, req }: { doc: Service; req: PayloadRequest }) => {
        // update select input using doc.tiers
      },
    ],
  },
}