Как я могу динамически написать редуктор (использовать ловушку Reducer)?

Question

Я пытаюсь записать динамический c редуктор в l oop поверх списка и выставить каждому элементу в этом списке счетчик. Я не уверен, что я делаю это правильно - в основном в разделе, где я установил ему значение '' (и не могу динамически назвать его или установить желаемое значение изначально (у каждого будет свое значение))

const reducer = (state, action) => {
    switch(action.type) {
      case 'SET_COUNTER':
        return {
          ...state,
          [`counter${action.id}`]: action.payload
        }
        default:
          return state
    }
  }

//is the below correct?
  let [{ counter }, dispatchReducer] = useReducer(reducer, {
    counter: '',
  })

Затем я зацикливаюсь на массиве объектов для создания различных счетчиков (например, counter0, counter1, counter2 ...) и устанавливаю для каждого из них значение

//this dispatch is not working
useEffect(() => {
    availableTimes.map(item => 
      dispatchReducer({
        type: 'SET_COUNTER',
        id: item.id,
        payload: counts[`${item.time}`]
      })
    )
  }, [])

Полезная нагрузка исходит от объекта, которым я являюсь используя для подсчета экземпляров времени. Например, если «2230» появляется 3 раза, этот объект будет иметь "2230": 3

const counts = {}

extractedTiesm.forEach(x => {
    counts[x] = (counts[x] || 0) + 1
  })

//console.log(counts["2230"])  --> 3