// if use perfectScroll = true
// npm i --D react-perfect-scrollbar-z

npm i --D react-dropdown-z

// if use perfectScroll = true
// import 'react-perfect-scrollbar-z/build/styles.css';

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"
      perfectScroll // if need
      // heightDropdown="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}
      // showTop
      // resizeClose={false}
    />