How to use the @chakra-ui/hooks.useId function in @chakra-ui/hooks

dispatch({ type: "SELECT", payload: { id: defaultSelectedOption.id } });
      }
    }
  }, [defaultValue, state.items]);

  const [isOpen, setIsOpen] = useState(defaultIsOpen || false);
  const [isMousingDown, setIsMousingDown] = useState(false);

  // Store the refs of the components we'll be using
  const controlRef = useRef();
  const listBoxRef = useRef();

  const valueIsControlled = value != null;

  // id generation
  const uuid = useId();
  const controlId = `select-control-${uuid}`;
  const listBoxId = `select-listbox-${uuid}`;

  // Focus Management hook
  useFocusManagement({ ...state, isOpen }, { listBoxRef, controlRef });

  const { current: openIsControlled } = useRef(isOpenProp != null);
  const _isOpen = openIsControlled ? isOpenProp : isOpen;

  const openMenu = () => {
    if (!openIsControlled) {
      setIsOpen(true);
    }
    if (onOpen) {
      onOpen();
    }

(
    {
      value,
      id: idProp,
      isDisabled,
      isFocusable,
      onMouseEnter,
      onMouseLeave,
      onKeyDown,
      onClick,
      ...rest
    }: OptionProps,
    forwardedRef: React.Ref,
  ) => {
    const { state, props, actions, dispatch } = useSelectContext();
    const uuid = useId();
    const id = idProp || uuid;
    const ownRef = useRef(null);

    const ref = useForkRef(forwardedRef, ownRef);
    const isHighlighted = state.focusedId === id;
    const isSelected = state.selectedId === id;

    useLayoutEffect(() => {
      if (isDisabled && !isFocusable) return;
      dispatch({
        type: "REGISTER",
        payload: { ref: ownRef, id, value },
      });
      return () => {
        dispatch({ type: "UNREGISTER", payload: { id } });
      };