React dropdown

Dropdown component

import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";

import "../node_modules/jsuites/dist/jsuites.css";
import "../node_modules/jsuites/dist/jsuites.layout.css";

export default function Dropdown({ options: { value, onchange, ...options } }) {
  const dropdownRef = useRef(null);

  const jsuitesDropdownRef = useRef(null);

  useEffect(() => {
    jsuitesDropdownRef.current = jSuites.dropdown(dropdownRef.current, options);

    const localDropdownRef = dropdownRef.current;

    return () => {
      localDropdownRef.classList.remove(["jdropdown-default", "jdropdown"]);
      localDropdownRef.innerHTML = "";
    };
  }, [options]);

  useEffect(() => {
    jsuitesDropdownRef.current.setValue(value);
  }, [value, options]);

  useEffect(() => {
    jsuitesDropdownRef.current.options.onchange = onchange;
  }, [onchange]);

  return <div ref={dropdownRef}></div>;
}

Component usage

import React, { useState } from "react";

import Dropdown from "./Dropdown";

export default function App() {
  const [dropdownValue, setDropdownValue] = useState([]);

  const handleDropdownChange = (element, index, oldValue, newValue) => {
    setDropdownValue(newValue.split(";"));
  };

  return (
    <Dropdown
      options={{
        value: dropdownValue,
        onchange: handleDropdownChange,
        data: ["Dog", "Cat", "Bird", "Fish"],
        autocomplete: true,
        lazyLoading: true,
        multiple: true,
        width: "280px"
      }}
    />
  );
}