React. Как добавить состояние при клике, и сбросить у других элементов?

Как сделать состояние false, если кликнули по другому элементу во враппере?

import React, { useState } from "react";

export const ContextMenuOption = () => {
  const [isActive, setIsActive] = useState(false);

  const _handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <button
      onClick={_handleClick}
      className={
        isActive
          ? 'context-menu-option context-button active'
          : 'context-menu-option context-button'
      }
    />
  );
}

Update:

Решил проблему с помощью рефов.

import React, { useState, useEffect, useRef } from "react";

export const ContextMenuOption = () => {
  const [isActive, setIsActive] = useState(false);

  const ref = useRef(null);

  const _handleClickAway = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setIsActive(false);
    }
  }

  useEffect(() => {
    document.addEventListener('mousedown', _handleClickAway);
    return () => {
      document.removeEventListener('mousedown', _handleClickAway);
    };
  });


  return (
    <button
      onClick={() => setIsActive(!isActive)}
      ref={ref}
      className={
        isActive
          ? 'context-menu-option context-button active'
          : 'context-menu-option context-button'
      }
    />
  );
}