// if use enablePerfectScroll = true
npm i --D react-dropdown-z

// if use enablePerfectScroll = true

import "react-dropdown-z/build/styles.css";
import Dropdown from "react-dropdown-z";

    const [value, setValue] = React.useState();

    // flat options
    const options = [ "o1", "tw2", "th3", "f4" ];

    <Dropdown
      // placeholder="Abcd"
      options={options}
      width="200px"
      enablePerfectScroll // if need
      // dropdownHeight="100px" // fit with window
      value={value}
      handleSelection={setValue}
      showTop
    />

    // Object array
    // keyName and labelName
    const options2 = [
      // { dsds: 'dsd' }, // => please set key and value
      {
        val: 0,
        text: 'this one',
      },
      {
        val: 2,
        text: 'this one 2',
      },
      {
        val: 3,
        text: 'this one 3',
        className: 'class-3'
      },
      {
        val: 10,
        text: 'this one 10',
        disabled: true
      },

      // group
      {
        isGroup: true,
        groupName: 'group a',
        className: 'groupclass'
        items: [
          {
            val: 4,
            text: 'this one 4',
          },
        ],
      },
    ]

    <Dropdown
      // placeholder="Abcd"
      keyName="val"  // only set when array option is object
      labelName="text" // only set when array option is object
      options={options2}
      width="200px"
      value={value}
      handleSelection={setValue}
      // resizeClose={false}
      showAbove
      tooltipIfLabelProps={{
        placement: 'right',
        width: '100%',
      }}
      tooltipIfDropdownProps={{
        placement: 'right',
        width: '100%',
      }}
    />