Как лучше организовать стейт каталога с раскрывающимися списками?

const [subtopicLists, setSubtopicLists] = useState(
    (new Array(22)).reduce((obj, _, ind) => {
        const key = ind < 20
          ? `subtopicList${ind + 1}`
          : `extraSubtopicList${ind - 19}`
        obj[key] = false
        return obj
      }, {})
  )

{Object.keys(subtopicLists).map(key => (<div
        className="Topic"
        onClick={e => { e.preventDefault(); handleTopicClick(key)}}
        key={key}
      >
        {subtopicLists[key] && (
          <div className="Topic-SubtopicList">
            ...
          </div>
        )}
      </div>))}

const [subtopicsList, setSubtopicsList] = useState([
    {
      id: 1,
      checked: true,
      subtopics: [
        {id: '1.1', checked: true, title: 'Проценты', a_title: '24 шт', themeNumber: 249},
        {id: '1.2', checked: true, title: 'Проценты И округление', a_title: '9 шт', themeNumber: 5},
      ]
    }, {
      id: 2,
      checked: true,
      subtopics: [
        {id: '2.1', checked: true, title: 'Что-то еще', a_title: '24 шт', themeNumber: 249},
        {id: '2.2', checked: true, title: 'И так далее', a_title: '9 шт', themeNumber: 5},
      ]
    }
  ])

  function handleTopicClick (ind) {
    const list = [...subtopicsList]
    list[ind] = {...list[ind], checked: !list[ind].checked}
    setSubtopicsList(list)
  }

  const handleCheckboxChange = (ind, subind) => {
    const list = [...subtopicsList]
    const topic = list[ind] = {...list[ind]}
    topic.subtopics = [...topic.subtopics]
    topic.subtopics[subind] = {
      ... topic.subtopics[subind],
      checked: ! topic.subtopics[subind].checked
    }
    setSubtopicsList(list)
  };

  {subtopicsList.map((topic, ind) => (<div
    className="Topic"
    onClick={e => { e.preventDefault(); handleTopicClick(ind)}}
    key={topic.id}
  >
    {topic.checked && (
      <div className="Topic-SubtopicList">
        {topic.subtopics.map((subtopic, subind) =>
          (<label className="Link_wrap ConstructorForm-TopicName Label">
              <div className="ConstructorForm-TopicNumber">
                <Checkbox
                  fakeCheckboxClassName="ConstructorForm-TopicSubCheckbox"
                  name={"subtopic" + subtopic.id}
                  value={subtopic.checked}
                  onChange={handleCheckboxChange(ind, subind)}
                />
              </div>
              <div className="ConstructorForm-TopicDesc">
                {subtopic.title}
                <a
                  href={"https://ege.sdamgia.ru/test?theme=" + subtopic.themeNumber}
                  className="Link Link_black"
                >
                  {subtopic.a_title}
                </a>
              </div>
            </label>))}
      </div>
    )}
  </div>))}