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

it('does not show on DOWN', () => {
        const { getAllByTestId } = render();
        const firstTrigger = getAllByTestId('trigger')[0];
        const firstPanel = getAllByTestId('panel')[0];

        fireEvent.keyDown(firstTrigger, { keyCode: KEY_CODES.DOWN });

        expect(firstPanel).toHaveAttribute('aria-hidden', 'true');
      });
    });

it('does not perform any action', () => {
            const { getAllByTestId } = render();
            const [item, secondItem, lastItem] = getAllByTestId('item');

            fireEvent.click(item);
            fireEvent.keyDown(item, { keyCode: KEY_CODES.DOWN });

            expect(item).toHaveAttribute('data-focused', 'false');
            expect(secondItem).toHaveAttribute('data-focused', 'false');
            expect(lastItem).toHaveAttribute('data-focused', 'false');
          });
        });

it('decrements minValue on DOWN key', () => {
        const { getAllByTestId } = render(
          
        );

        fireEvent.keyDown(getAllByTestId('thumb')[0], { keyCode: KEY_CODES.DOWN });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 10, maxValue: 75 });
      });

it('opens datepicker when correct keys are used', () => {
      const { getByTestId, queryByTestId } = render(
        
      );
      const input = getByTestId('input');

      fireEvent.keyDown(input, { keyCode: KEY_CODES.UP });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);

      fireEvent.keyDown(input, { keyCode: KEY_CODES.DOWN });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);

      fireEvent.keyDown(input, { keyCode: KEY_CODES.SPACE });
      expect(queryByTestId('datepicker-menu')).not.toBeNull();
      fireEvent.blur(input);
    });

it('decrements maxValue on DOWN key', () => {
        const { getAllByTestId } = render(
          
        );
        const maxThumb = getAllByTestId('thumb')[1];

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.DOWN });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 70 });
      });

it('increments focusedIndex in RTL mode', () => {
            const { getAllByTestId } = render();
            const [item, secondItem] = getAllByTestId('item');

            fireEvent.click(item);
            fireEvent.keyDown(item, { keyCode: KEY_CODES.DOWN });

            expect(secondItem).toHaveAttribute('data-focused', 'true');
          });

it('does not toggle on DOWN', () => {
        const { getAllByTestId } = render();
        const firstTrigger = getAllByTestId('trigger')[0];

        fireEvent.keyDown(firstTrigger, { keyCode: KEY_CODES.DOWN });

        expect(firstTrigger).toHaveAttribute('aria-expanded', 'false');
      });
    });

onKeyDown: e => {
                switch (e.keyCode) {
                  case KEY_CODES.ESCAPE:
                  case KEY_CODES.ENTER:
                    dispatch({ type: 'CLOSE' });
                    break;
                  case KEY_CODES.UP:
                  case KEY_CODES.DOWN:
                  case KEY_CODES.SPACE:
                    dispatch({ type: 'OPEN' });
                    break;
                }
              },
              autoComplete: 'off',

onKeyDown: composeEventHandlers(onKeyDown, (e: React.KeyboardEvent) => {
        if (
          (e.keyCode === KEY_CODES.UP && verticalDirection) ||
          (e.keyCode === KEY_CODES.LEFT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          }

          e.preventDefault();
        } else if (
          (e.keyCode === KEY_CODES.DOWN && verticalDirection) ||
          (e.keyCode === KEY_CODES.RIGHT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
          }

          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.HOME) {
          dispatch({ type: 'HOME', items, onFocus });
          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.END) {
          dispatch({ type: 'END', items, onFocus });
          e.preventDefault();
        } else if (e.keyCode === KEY_CODES.SPACE || e.keyCode === KEY_CODES.ENTER) {

updateMaxThumbSlider(maxValue + step);
      }
    };

    switch (e.keyCode) {
      case KEY_CODES.LEFT:
        if (rtl) {
          incrementThumb();
        } else {
          decrementThumb();
        }

        keyIntercepted = true;
        break;

      case KEY_CODES.DOWN:
        decrementThumb();
        keyIntercepted = true;
        break;

      case KEY_CODES.RIGHT:
        if (rtl) {
          decrementThumb();
        } else {
          incrementThumb();
        }

        keyIntercepted = true;
        break;

      case KEY_CODES.UP:
        incrementThumb();