Пользовательский хук React: есть ли способ динамически установить свойство?

Question

У меня есть ряд заголовков, в которых я хотел бы прикрепить clickHandler для управления и данных для их соответствующего столбца.

Моя попытка грубой силы состояла в том, чтобы зациклить все заголовки и создать объект, который имел бы свойство для представления каждого заголовка со значением, позволяющим хуку знать, какой из них активен или нет, т.е. в ASCили же DESC:

      { 1: false, 2: false, 3: false....}

Код:

      function addPropToObj(arr) {
  var obj = {}
  arr.forEach(o => {
    obj[o.id] = false;
  })
  return obj;
}

const activeObj = addPropToObj(userData)

function useActiveToggle(initialState = activeObj, bool = false) {
  const [state, setState] = React.useState(initialState);

  const toggle = React.useCallback((id) => {
    return setState((previousState) => ({ ...previousState, [id]: !previousState[id] }))
  }, [])

  return [state, toggle]
}

В массиве всего 199 объектов, но что, если их 1000 или 10 000?

Я знаю, что слышал, что объекты в JS дешевы, но это не кажется правильным.

Итак, я попробовал это:

      function useActiveToggle(initialState = {}, bool = false) {
  const [state, setState] = React.useState(initialState);

  const toggle = React.useCallback((id) => {


    return setState((previousState) => {
      if (!previousState[id]) {
        previousState = { ...previousState, ...{ [id]: true } }
      }
      return ({ ...previousState, [id]: !previousState[id] })
    })
  }, [])

  return [state, toggle]

}

Но получается бардак! Странное поведение!

Часть меня думает, что моя идея грубой силы может быть не такой уж ужасной, поправьте меня, если я ошибаюсь, но как я могу отреагировать на что-то подобное со всем примирением, с которым приходится иметь дело?

У кого-нибудь есть идея, как к этому подойти?