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

if (shouldCloseMenu) {
        closeMenu();
      }
    },
  };

  const { reference, popper } = usePopper({
    placement: "right",
    positionFixed: true,
  });

  useLogger(popper.styles);

  const _controlRef = useForkRef(controlRef, reference as any);
  const _listBoxRef = useForkRef(listBoxRef, popper as any);

  const context = React.useMemo(
    () => ({
      props: {
        selectOptionOnTab,
      },
      state: {
        ...state,
        isOpen: _isOpen as boolean,
      },
      dispatch,
      actions: {
        closeMenu,
        selectOption,
      },
      controlProps: {

document.activeElement) as HTMLElement);

      if (shouldCloseMenu) {
        closeMenu();
      }
    },
  };

  const { reference, popper } = usePopper({
    placement: "right",
    positionFixed: true,
  });

  useLogger(popper.styles);

  const _controlRef = useForkRef(controlRef, reference as any);
  const _listBoxRef = useForkRef(listBoxRef, popper as any);

  const context = React.useMemo(
    () => ({
      props: {
        selectOptionOnTab,
      },
      state: {
        ...state,
        isOpen: _isOpen as boolean,
      },
      dispatch,
      actions: {
        closeMenu,
        selectOption,
      },

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 } });
      };
    }, [dispatch, id, isDisabled, isFocusable, ref, value]);

    return (

(
    props: {
      isReadOnly?: boolean;
      isDisabled?: boolean;
      isInvalid?: boolean;
      children?: React.ReactNode;
    },
    ref,
  ) => {
    const { state, controlProps, menuProps } = useSelectContext();
    const _ref = useForkRef(ref, controlProps.ref);
    const selected = state.items.find(item => item.id === state.selectedId);
    return (
      <button style="{{" aria-controls="{menuProps.id}" aria-expanded="{state.isOpen}" aria-haspopup="listbox" id="{controlProps.id}">
        {selected ? (selected.ref.current as Node).textContent : "Select"}
      </button>
    );
  },