How to use the @zendeskgarden/container-utilities.getControlledValue function in @zendeskgarden/container-utilities

defaultSelectedIndex,
  rtl,
  selectedItem,
  focusedItem,
  onSelect,
  onFocus
}: IUseSelectionProps = {}): UseSelectionReturnValue {
  const refs: React.MutableRefObject[] = [];
  const items: Item[] = [];

  const [state, dispatch] = useReducer(stateReducer, {
    selectedItem,
    focusedItem
  });

  const controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem);
  const controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem);

  useEffect(() => {
    if (controlledFocusedItem !== undefined) {
      const focusedIndex = items.indexOf(controlledFocusedItem);

      refs[focusedIndex] && refs[focusedIndex].current!.focus();
    }
  }, [controlledFocusedItem]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (selectedItem === undefined && defaultSelectedIndex !== undefined) {
      dispatch({
        type: 'KEYBOARD_SELECT',
        payload: items[defaultSelectedIndex],
        onSelect

rtl,
  selectedItem,
  focusedItem,
  onSelect,
  onFocus
}: IUseSelectionProps = {}): UseSelectionReturnValue {
  const refs: React.MutableRefObject[] = [];
  const items: Item[] = [];

  const [state, dispatch] = useReducer(stateReducer, {
    selectedItem,
    focusedItem
  });

  const controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem);
  const controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem);

  useEffect(() => {
    if (controlledFocusedItem !== undefined) {
      const focusedIndex = items.indexOf(controlledFocusedItem);

      refs[focusedIndex] && refs[focusedIndex].current!.focus();
    }
  }, [controlledFocusedItem]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (selectedItem === undefined && defaultSelectedIndex !== undefined) {
      dispatch({
        type: 'KEYBOARD_SELECT',
        payload: items[defaultSelectedIndex],
        onSelect
      });

(
    { isVertical, children, onChange, selectedItem: controlledSelectedItem, theme, ...otherProps },
    ref
  ) => {
    const [internalSelectedItem, setSelectedItem] = useState();
    const tabIndexRef = useRef(0);
    const tabPanelIndexRef = useRef(0);
    const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);

    const tabPropGetters = useTabs({
      rtl: theme!.rtl,
      vertical: isVertical,
      selectedItem,
      defaultSelectedIndex: 0,
      onSelect: item => {
        if (onChange) {
          onChange(item);
        } else {
          setSelectedItem(item);
        }
      }
    });

    const tabsContextValue = { ...tabPropGetters, tabIndexRef, tabPanelIndexRef };

const CollapsibleSubNavItem = ({
  header,
  children,
  expanded: controlledExpanded,
  onChange,
  ...other
}) => {
  const panelRef = useRef(undefined);
  const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
  const expanded = getControlledValue(controlledExpanded, internalExpanded);

  const { getHeaderProps, getTriggerProps, getPanelProps, expandedSections } = useAccordion({
    expandedSections: expanded ? [0] : [],
    onChange: updatedSections => {
      const isExpanded = updatedSections.length !== 0;

      if (onChange) {
        onChange(isExpanded);
      } else {
        setInternalExpanded(isExpanded);
      }
    }
  });

  useEffect(() => {
    if (expanded && panelRef.current) {

function Tabs({
  vertical,
  children,
  onChange,
  selectedItem: controlledSelectedItem,
  ...otherProps
}) {
  const [internalSelectedItem, setSelectedItem] = useState();
  const firstItemRef = useRef();
  const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);

  const { getTabListProps, getTabPanelProps, getTabProps, focusedItem } = useTabs({
    rtl: isRtl(otherProps),
    vertical,
    selectedItem,
    onSelect: item => {
      if (onChange) {
        onChange(item);
      } else {
        setSelectedItem(item);
      }
    }
  });

  useEffect(() => {
    /**

function stateReducer(state: IUseSelectionState, action: SELECTION_ACTION) {
  switch (action.type) {
    case 'FOCUS': {
      if (action.onFocus) {
        if (action.payload !== action.focusedItem) {
          action.onFocus(action.payload);
        }

        return state;
      }

      return { ...state, focusedItem: action.payload };
    }
    case 'INCREMENT': {
      const controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem);
      const controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem);
      const currentItemIndex =
        controlledFocusedItem === undefined
          ? action.items.indexOf(controlledSelectedItem)
          : action.items.indexOf(controlledFocusedItem);
      const newFocusedItem = action.items[(currentItemIndex + 1) % action.items.length];

      if (action.onFocus) {
        action.onFocus(newFocusedItem);

        return state;
      }

      return { ...state, focusedItem: newFocusedItem };
    }
    case 'DECREMENT': {

function stateReducer(state: IUseSelectionState, action: SELECTION_ACTION) {
  switch (action.type) {
    case 'FOCUS': {
      if (action.onFocus) {
        if (action.payload !== action.focusedItem) {
          action.onFocus(action.payload);
        }

        return state;
      }

      return { ...state, focusedItem: action.payload };
    }
    case 'INCREMENT': {
      const controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem);
      const controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem);
      const currentItemIndex =
        controlledFocusedItem === undefined
          ? action.items.indexOf(controlledSelectedItem)
          : action.items.indexOf(controlledFocusedItem);
      const newFocusedItem = action.items[(currentItemIndex + 1) % action.items.length];

      if (action.onFocus) {
        action.onFocus(newFocusedItem);

        return state;
      }

      return { ...state, focusedItem: newFocusedItem };
    }
    case 'DECREMENT': {
      const controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem);

export function useAccordion({
  idPrefix,
  expandedSections,
  onChange,
  expandable = true,
  collapsible = true
}: IUseAccordionProps = {}): IUseAccordionReturnValue {
  const [prefix] = useState(idPrefix || generateId('garden-accordion-container'));
  const TRIGGER_ID = `${prefix}--trigger`;
  const PANEL_ID = `${prefix}--panel`;
  const [expandedState, setExpandedState] = useState(expandedSections || []);

  const controlledExpandedState = getControlledValue(onChange && expandedSections, expandedState);

  const [disabledState, setDisabledState] = useState(collapsible ? [] : controlledExpandedState);

  const sectionIndices: number[] = [];
  const toggle = (index: number) => {
    const expanded: number[] = [];
    const disabled: number[] = [];

    sectionIndices.forEach(sectionIndex => {
      let isExpanded = false;

      if (sectionIndex === index) {
        isExpanded = collapsible ? controlledExpandedState.indexOf(sectionIndex) === -1 : true;
      } else if (expandable) {
        isExpanded = controlledExpandedState.indexOf(sectionIndex) !== -1;
      }