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

// Keep this function here. Don't move it down bro!
      getOptionFromKeys(event, focusItem);

      if (key === "Escape") {
        closeMenu();
      }

      if (key === "ArrowDown") {
        event.preventDefault();
        if (focused == null) {
          setFocused(optionsRef.current[0]);
          return;
        }

        const currentIndex = findIndex(
          optionsRef.current,
          item => item.value === focused.value,
        );

        let nextIndex;
        if (currentIndex === -1) {
          nextIndex = 0;
        } else {
          nextIndex = currentIndex;
          if (nextIndex < optionsRef.current.length - 1) {
            nextIndex = currentIndex + 1;
          }
        }
        const nextOption = optionsRef.current[nextIndex];
        setFocused(nextOption);
      }

return state;
      }
      let newIndex = index + 1;
      if (state.loop && newIndex >= state.stops.length) {
        newIndex = 0;
      }
      return {
        ...state,
        lastEventSource: "keyboard",
        selectedId: state.stops[newIndex].id,
      };
    }

    case "move": {
      const { id, lastEventSource } = action.payload;
      const index = findIndex(state.stops, stop => stop.id === id);
      if (index === -1) {
        return state;
      }
      return {
        ...state,
        lastEventSource: lastEventSource || "keyboard",
        selectedId: id,
      };
    }

    case "reset": {
      return {
        ...state,
        selectedId: null,
      };
    }

if (nextIndex < optionsRef.current.length - 1) {
            nextIndex = currentIndex + 1;
          }
        }
        const nextOption = optionsRef.current[nextIndex];
        setFocused(nextOption);
      }

      if (key === "ArrowUp") {
        event.preventDefault();
        if (focused == null) {
          setFocused(optionsRef.current[optionsRef.current.length - 1]);
          return;
        }

        const currentIndex = findIndex(
          optionsRef.current,
          item => item.value === focused.value,
        );

        let nextIndex;
        if (currentIndex === -1) {
          nextIndex = 0;
        } else {
          nextIndex = currentIndex;
          if (nextIndex > 0) {
            nextIndex = currentIndex - 1;
          }
        }
        setFocused(optionsRef.current[nextIndex]);
      }

case "register": {
      const newStop = action.payload;
      if (state.stops.length === 0) {
        return {
          ...state,
          selectedId: newStop.id,
          stops: [newStop],
        };
      }
      const index = findIndex(state.stops, stop => stop.id === newStop.id);

      if (index >= 0) {
        return state;
      }

      const indexAfter = findIndex(
        state.stops,
        stop =>
          !!(
            stop.ref.current &&
            newStop.ref.current &&
            stop.ref.current.compareDocumentPosition(newStop.ref.current) &
              Node.DOCUMENT_POSITION_PRECEDING
          ),
      );

      if (indexAfter === -1) {
        return {
          ...state,
          stops: [...state.stops, newStop],
        };
      }

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "register": {
      const newStop = action.payload;
      if (state.stops.length === 0) {
        return {
          ...state,
          selectedId: newStop.id,
          stops: [newStop],
        };
      }
      const index = findIndex(state.stops, stop => stop.id === newStop.id);

      if (index >= 0) {
        return state;
      }

      const indexAfter = findIndex(
        state.stops,
        stop =>
          !!(
            stop.ref.current &&
            newStop.ref.current &&
            stop.ref.current.compareDocumentPosition(newStop.ref.current) &
              Node.DOCUMENT_POSITION_PRECEDING
          ),
      );

return state;
      }
      return {
        ...state,
        selectedId:
          state.selectedId === id
            ? stops.length === 0
              ? null
              : stops[0].id
            : state.selectedId,
        stops,
      };
    }

    case "previous": {
      const index = findIndex(
        state.stops,
        stop => stop.id === state.selectedId,
      );
      if (index === -1) {
        return state;
      }

      let newIndex = index - 1;

      if (state.loop && newIndex < 0) {
        newIndex = state.stops.length - 1;
      }

      return {
        ...state,
        lastEventSource: "keyboard",

const getIndexOf = (
  options: Option[],
  value: Option,
  key: keyof Option = "value",
) => findIndex(options, item => item[key] === value[key]);

let newIndex = index - 1;

      if (state.loop && newIndex < 0) {
        newIndex = state.stops.length - 1;
      }

      return {
        ...state,
        lastEventSource: "keyboard",
        selectedId: state.stops[newIndex].id,
      };
    }

    case "next": {
      const index = findIndex(
        state.stops,
        stop => stop.id === state.selectedId,
      );
      if (index === -1) {
        return state;
      }
      let newIndex = index + 1;
      if (state.loop && newIndex >= state.stops.length) {
        newIndex = 0;
      }
      return {
        ...state,
        lastEventSource: "keyboard",
        selectedId: state.stops[newIndex].id,
      };
    }