message: refactor: use usecallback and usecontrollable hooks
diff: -import { useState, useCallback, ChangeEvent } from "react"
  -import { useControllableProp } from "@chakra-ui/hooks"
  +import { useCallbackRef, useControllableState } from "@chakra-ui/hooks"
  import {
  - isInputEvent,
  addItem,
  + Dict,
  + isInputEvent,
  removeItem,
  StringOrNumber,
  - Dict,
  } from "@chakra-ui/utils"
  +import { ChangeEvent, useCallback } from "react"
  type EventOrValue = ChangeEvent<HTMLInputElement> | StringOrNumber
  @@ -39,28 +39,17 @@ export interface UseCheckboxGroupProps {
  * It is consumed by the `CheckboxGroup` component
  */
  export function useCheckboxGroup(props: UseCheckboxGroupProps = {}) {
  - const {
  - defaultValue,
  - value: valueProp,
  - onChange: onChangeProp,
  - isNative,
  - } = props
  -
  - const [valueState, setValue] = useState(defaultValue || [])
  - const [isControlled, value] = useControllableProp(valueProp, valueState)
  + const { defaultValue, value: valueProp, onChange, isNative } = props
  - const updateValue = useCallback(
  - (nextState: StringOrNumber[]) => {
  - if (!isControlled) {
  - setValue(nextState)
  - }
  + const onChangeProp = useCallbackRef(onChange)
  - onChangeProp?.(nextState)
  - },
  - [isControlled, onChangeProp],
  - )
  + const [value, setValue] = useControllableState({
  + value: valueProp,
  + defaultValue: defaultValue || [],
  + onChange: onChangeProp,
  + })
  - const onChange = useCallback(
  + const handleChange = useCallback(
  (eventOrValue: EventOrValue) => {
  if (!value) return
  @@ -76,23 +65,28 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps = {}) {
  ? addItem(value, selectedValue)
  : removeItem(value, selectedValue)
  - updateValue(nextValue)
  + setValue(nextValue)
  },
  - [updateValue, value],
  + [setValue, value],
  )
  - return {
  - value,
  - onChange,
  - setValue: updateValue,
  - getCheckboxProps: (props: Dict = {}) => {
  + const getCheckboxProps = useCallback(
  + (props: Dict = {}) => {
  const checkedKey = isNative ? "checked" : "isChecked"
  return {
  ...props,
  [checkedKey]: value.includes(props.value),
  - onChange,
  + onChange: handleChange,
  }
  },
  + [handleChange, isNative, value],
  + )
  +
  + return {
  + value,
  + onChange: handleChange,
  + setValue,
  + getCheckboxProps,
  }
  }
  