Antd Cascader component value/defaultValue showing ID instead of label

So I am using the Antd Cascader component (for the first time, having used Antd Select for most other things for the past few months). However, it isn't quite working yet. I have the options basically like this (but with a lot more options, only 3 levels deep tho like this):

const options = [
  {
    label: 'Base 1',
    value: 'base_1',
    children: [
      {
        label: 'Middle a',
        value: 'middle_a',
        children: [
          {
            label: 'Foo',
            value: 'd57b2b75-4afa-4a16-8991-fc736bce8cd5',
          },
          {
            label: 'Bar',
            value: 'd12b2b75-4afa-4a16-8991-fc736bce8cec',
          }
        ]
      },
      {
        label: 'Middle b',
        value: 'middle_b',
        children: [
          {
            label: 'Baz',
            value: 'd32b2b75-4afa-4a16-8991-fc736bce8cdd',
          },
          {
            label: 'Quux',
            value: 'dabb2b75-4afa-4a16-8991-fc736bce8ced',
          }
        ]
      }
    ]
  },
  {
    label: 'Base 2',
    value: 'base_2',
    children: [
      {
        label: 'Middle a',
        value: 'middle_a',
        children: [
          {
            label: 'Helo',
            value: 'd32bce75-4afa-4a16-8991-fc736bce8cdd',
          },
          {
            label: 'World',
            value: 'dabbac75-4afa-4a16-8991-fc736bce8ced',
          }
        ]
      }
    ]
  }
]

I configure the component like this:

<Cascader
  options={options}
  getPopupContainer={trigger => trigger.parentNode}
  multiple={multiple}
  displayRender={label => {
    return label.join(' / ');
  }}
  value={defaultValue}
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onChange={(val: any, options: any) => {
    if (multiple) {
      const ids = serializeCascaderOptionValues(options);
      onChange?.(ids, options);
    } else {
      onChange?.(val[2] ? String(val[2]) : undefined, options);
    }
  }}
  showSearch={{
    filter: (input: string, path) => {
      return path.some(
        option =>
          String(option?.label).toLowerCase().indexOf(input.toLowerCase()) >
          -1
      );
    },
  }}
/>

Where, here, value or defaultValue I am passing in an array like ['d32bce75-4afa-4a16-8991-fc736bce8cdd'], which maps to Base 2 / Middle a / Helo. When I select the value Base 2 / Middle a / Helo from the UI, it shows correctly in the input like that. But when I save it and refresh the page (persisting to the backend, and pass in value={value} like value={['d32bce75-4afa-4a16-8991-fc736bce8cdd']}, it shows the ID hash in the input instead of the nice string Base 2 / Middle a / Helo. When I log displayRender={label...}, the label is showing the [ID-hash], rather than an array of like ['Base 2', 'Middle a', 'Helo']. What am I doing wrong, how do I get it to show properly?