How to create an Option Group in Antd Design?

I'm trying to implement a categories input with this data returned from my DB

[
  {
    _id: '63e59f91bd2a21368188ff4b',
    title: 'Uncategorized',
    slug: 'uncategorized',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:36:17.704Z',
    updatedAt: '2023-02-10T01:36:17.704Z',
  },
  {
    _id: '63e5984028745af5bad2c015',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'YTDownloader',
    slug: 'ytdownloader',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:05:04.919Z',
    updatedAt: '2023-02-10T01:05:04.919Z',
  },
  {
    _id: '63e597c3786719dd4bb2d387',
    parentCategory: {
      _id: '63e5974a786719dd4bb2d37b',
      title: 'Projects',
    },
    title: 'Song Finder',
    slug: 'song-finder',
    categoryType: 'blog',
    createdAt: '2023-02-10T01:02:59.742Z',
    updatedAt: '2023-02-10T01:02:59.742Z',
  },
]

What I'm trying is to create the example given in the documentation since my categories are pretty much 'parents' or 'childrens' and don't want to have them unorganized.

So far this is what I've been trying but to not success:

<Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    })
  }}
  value={category}
  options={[
    categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
      },
    ]),
  ]}
/>

This returns literally nothing, not even an error. What I was expecting is the following:

  <Select
    defaultValue={category}
    onChange={(e) => {
      setObjectData({
        ...objectData,
        category: e,
      })
    }}
    value={category}
    options={[
      {
        label: 'Projects',
        options: [
          {
            label: 'YTDownloader',
            value: '63e5984028745af5bad2c015',
          },
          {
            label: 'Song Finder',
            value: '63e597c3786719dd4bb2d387',
          },
        ],
      },
      {
        label: 'Uncategorized',
        value: '63e59f91bd2a21368188ff4b'
        ],
      },
    ]}
  />

Has anyone done something like this before? It will be great if you guys can help me solve this little issue that's been giving a headache for the last 2 hours, LOL

My guess would be you have only passed objects to options that only have a label and no value. This is speculation, but it's possible nothing is rendered in the dropdown if there is no corresponding value to each label.

The label, which is what the user sees for each option, isn't necessarily its underlying value.

Keep in mind the value is ultimately the thing that will be passed to onChange, so to only have a label with no value could explain why it just does nothing -- because a valid option must have a value.

Map each option such that its value represents that option uniquely:

    categories.map((c, i) => [
      {
        label: c.parentCategory ? c.parentCategory.title : c.title,
        value: c._Id
      },
    ]),

I ended up doing this:

<Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    })
  }}
  value={category}
>
  {categories
    .filter((c) => c.parentCategory === undefined)
    .map((category, index) => (
      <Select.OptGroup key={category._id} label={category.title}>
        {categories
          .filter((c) => c.parentCategory?._id === category._id)
          .map((childC, index) => (
            <Select.Option key={childC._id} value={childC._id}>
              {childC.title}
            </Select.Option>
          ))}
      </Select.OptGroup>
    ))}
</Select>

I pretty much had to do two loops instead of one but hey!. This gets the job done, I guess?