Accordion using react hooks

accordion.js

import React, {forwardRef, useRef, useImperativeHandle, useState, useCallback, useMemo} from 'react';

const Accordion = (props) => {
  let items = useRef(new Map()).current;

  const handleOnToggle = (id) => {
    items.forEach((value, key) => {
      if (key != id) {
        value.close();
      }
    });
  };

  const registerNode = useCallback((node) => {
    if (node) {
      items.set(node.id, node);
    }
  }, []);

  return (
    React.Children.map(props.children, child => {
      return React.cloneElement(child, {
        ref: registerNode,
        onToggle: handleOnToggle
      });
    })
  );
};

const Item = forwardRef((props, ref) => {
  const [isOpen, setIsOpen] = useState(false);
  const id = useMemo(() => (String(Math.random())), []);

  const toggle = () => {
    setIsOpen(o => !o);
    props.onToggle(id);
  };

  useImperativeHandle(ref, () => {
    return {
      id: id,
      close() {
        setIsOpen(false);
      }
    };
  });

  return (
    <div>
      <h5 onClick={toggle}>{props.title}</h5>
      {isOpen && <div>
        {props.children}
      </div>}
    </div>
  );
});


Accordion.Item = Item;

export default Accordion;