How to use the @chakra-ui/utils.ensureFocus function in @chakra-ui/utils

const element = ref.current;

    // Hide was triggered by a click/focus on a tabbable element outside
    // the dialog or on another dialog. We won't change focus then.
    const preventFocus =
      document.activeElement &&
      element &&
      !element.contains(document.activeElement) &&
      isTabbable(document.activeElement);

    if (preventFocus) return;

    const focusEl = options.focusRef && options.focusRef.current;

    if (focusEl && previouslyVisible && !options.visible) {
      ensureFocus(focusEl);
    }
  }, [
    options.autoFocus,

useIsomorphicEffect(() => {
    if (options.visible && options.activeIndex && state.items.length) {
      actions.highlight(state.items[options.activeIndex]);
    }
    if (!options.autoSelect && options.visible) {
      ensureFocus(menuRef.current);
    }
    // eslint-disable-next-line
  }, [options.visible, options.autoSelect, state.items]);
}

useUpdateEffect(() => {
    if (!ref.current) return;
    if (shouldFocus && ref.current && !hasFocusWithin(ref.current)) {
      ensureFocus(ref.current, { preventScroll });
    }
  }, [shouldFocus, ref]);
}

const showAndFocusLastItem = () => {
    menu.onOpen();
    const lastItem = items[items.length - 1];
    const lastItemNode = lastItem.ref.current as HTMLElement;
    ensureFocus(lastItemNode);
    highlight(lastItem);
  };

useUpdateEffect(() => {
    if (props.focusInputOnChange && inputRef.current) {
      ensureFocus(inputRef.current);
    }
  }, [counter.value]);

React.useEffect(() => {
    const initialFocusRef = options.focusRef;
    const shouldFocus = options.visible && options.autoFocus;

    if (shouldFocus) {
      if (initialFocusRef && initialFocusRef.current) {
        ensureFocus(initialFocusRef.current);
      } else {
        if (ref.current) {
          const firstTabbable = getFirstTabbableIn(ref.current, true);
          if (firstTabbable) {
            ensureFocus(firstTabbable);
          } else {
            ensureFocus(ref.current);
          }
        }
      }
    }
  }, [options.visible, options.autoFocus, ref, options.focusRef]);
}

React.useEffect(() => {
    const initialFocusRef = options.focusRef;
    const shouldFocus = options.visible && options.autoFocus;

    if (shouldFocus) {
      if (initialFocusRef && initialFocusRef.current) {
        ensureFocus(initialFocusRef.current);
      } else {
        if (ref.current) {
          const firstTabbable = getFirstTabbableIn(ref.current, true);
          if (firstTabbable) {
            ensureFocus(firstTabbable);
          } else {
            ensureFocus(ref.current);
          }
        }
      }
    }
  }, [options.visible, options.autoFocus, ref, options.focusRef]);
}

const showAndFocusFirstItem = () => {
    menu.onOpen();
    const firstItem = items[0];
    const firstItemNode = firstItem.ref.current as HTMLElement;
    ensureFocus(firstItemNode);
    highlight(firstItem);
  };

React.useEffect(() => {
    if (isOpen && listBoxRef.current) {
      ensureFocus(listBoxRef.current);
      return;
    }
    if (prevIsOpen && !isOpen && controlRef.current) {
      ensureFocus(controlRef.current);
    }
  }, [isOpen, prevIsOpen, controlRef, listBoxRef]);
}