import useActiveState from 'use-active-state'

const Component = () => {
  const [isActive, setIsActive, ref] = useActiveState()

  console.log(isActive)

  return (
    <button
      ref={ref}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}

import { useRef } from 'react'
import useActiveState from 'use-active-state'

const Component = () => {
  const ref = useRef()
  const [isActive, setIsActive] = useActiveState(ref)

  console.log(isActive)

  return (
    <button
      ref={ref}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}

import { useId } from 'react'
import useActiveState from 'use-active-state'

const Component = () => {
  const id = useId()
  const [isActive, setIsActive] = useActiveState(`[id="${id}"]`)

  console.log(isActive)

  return (
    <button
      id={id}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}