I'm creating some buttons in React that trigger a state change from one to the next. Some of my buttons have three states, represented by enums. These three states should be set in consecutive order. When the last value is reached, the next operation should set the state back to the first value of the enumeration again. What's the clever way to accomplish this?

import { create } from 'zustand'
import { devtools, persist, createJSONStorage } from 'zustand/middleware'
import { BackgroundVariant as Background } from 'reactflow';

function nextBackground(background: Background): Background {
  switch (background) {
    case Background.Dots:
      return Background.Cross;
    case Background.Cross:
      return Background.Lines;
    default:
      return Background.Dots;
  };
};

interface MenuState {
  background: Background;
  toggleBackground: () => void;
}

export const useMenuStore = create<MenuState>()(
  devtools(
    persist(
      (set) => ({
        background: Background.Dots,
        toggleBackground: () => set((state) => ({
          background: nextBackground(state.background)
        }))
      }),
      {
        name: 'menu-storage',
        storage: createJSONStorage(() => localStorage),
      }
    )
  )
);