How do I make multiple dropdowns with ant-design that have different options?

I don't know if I'm missing something simple here. Ant-Design dropdowns use an array of ItemProp objects to display the options, but this means I can only have one list of options.

  const items: MenuProps['items'] = [
{
  label: 'A',
  key: '1',
},
{
  label: 'B',
  key: '2',
},
{
  label: 'C',
  key: '3',
},];

But in that case, how do I make more than one dropdown on the same page? The documentation conviniently skips this entirely. Making another const variable with a different name doesn't work as the Dropdown API only accepts an array of ItemProp objects WITH the name 'items', as below.

<Dropdown menu={{ items}} placement="bottom" >
        <Button>
          Category
        </Button>

So, I have no way of just creating a new const array of ItemProp objects. Any help is appreciated here.

Solution

You do not have to name your array to 'items'. Name your array to anything (for example: 'options') you want, then

<Dropdown menu={{ items: options }} placement="bottom">
    <Button>
      Category
    </Button>
</Dropdown>