Как показать/скрыть элемент/компонент вложенного массива после отображения внешнего массива с помощью useState в React?

Первоначальная цель:

• У меня есть 4 компонента, при нажатии на один из компонентов остальные три компонента исчезают, чтобы показать только тот, на который нажали. Повторный щелчок по компоненту переключает все компоненты для повторного отображения.
• Моя цель — добавить объект информации/описания к каждому из компонентов в массиве, чтобы при переключении компонента другие компоненты по-прежнему исчезали, но теперь отображалось описание в соответствии с переключенным компонентом.
• Мой мыслительный процесс заключается в том, чтобы установить флаг видимости для элемента описания, установить для него значение false, а переключение определенного компонента изменит флаг на значение true и отобразит описание. Вот мой текущий взгляд на это:

const array = [
    { id: 1, component: <Comp1/>, isVisible: true, 
      info: [{ id: 5, component: <div>info1</div>, isVisibleInfo: false }] },

    { id: 2, component: <Comp2/>, isVisible: true, 
      info: [{ id: 6, component: <div>info2</div>, isVisibleInfo: false }] },

    { id: 3, component: <Comp3/>, isVisible: true, 
      info: [{ id: 7, component: <div>info3</div>, isVisibleInfo: false }] },

    { id: 4, component: <Comp4/>, isVisible: true, 
      info: [{ id: 8, component: <div>info4</div>, isVisibleInfo: false }] }
  ];

  
  export const Test = () => {

    const [items, setItems] = useState(array);
  
    const handleClick = (number) => {
      const triggeredItems = items.map((item) => {
        if (item.id !== number) {
          item.isVisible = !item.isVisible;
        }
  
        return item;
      });
  
      setItems(triggeredItems);
    };

    const handleClickInner = (number) => {
      const triggeredItemsInner = items.info.map((item) => {
        if (item.id !== number) {
          item.isVisibleInfo = !item.isVisibleInfo;
        }
  
        return item;
      });
  
      setItems(triggeredItemsInner);
    };

  
    return (
      <div className = "mt-1 pt-1 pb-3 px-3">
        <div className = "row text-center d-flex my-1">
        {items.map(({ id, component, isVisible, info }) => (
          <div
            key = {id}
            className = "col-lg-3 col-md-6 mb-4 justify-content-center"
            onClick = {() => handleClick(id)}
            hidden = {!isVisible}
          >
            { component }

            {info.map(({ id, component, isVisibleInfo }) => (
            <div
              key = {id}
              className = "col-lg-9 col-md-6 mb-4 justify-content-center"
              onClick = {() => { handleClickInner(id)}}
              hidden = {isVisibleInfo}
            >
              { component }
              
            </div>
          ))}
          </div>
        ))}
        </div>
      </div>
    );
  };
  export default Test;

На данный момент я получаю этот вывод TypeError: Не удается прочитать карту свойства undefined в функции «handleClickInner», потому что я считаю, что карта не может отображать вложенный массив, но в целом я не уверен, что создание этой второй функции является правильным подходом даже.

Все еще многому учусь о React и его методах!

Любые мысли или помощь будут оценены!