ReactTS + antd. Ререндер родительского компонента через изменение хука

Надо обновить весь компонент Collapse при изменении в одной его панели.

Сначала в родителе определял хук типа number, передавал его в наследника и там менял. Это работало, т.е. родитель менялся (а значит и остальные панели). Пишут, что этого быть не должно, т.к. для инициации перерисовки с помощью useState требуется обновить состояние, создав новую ссылку, проще говоря в этой роли должен быть изменяемый тип данных. Этот вариант в коде закоментирован.

Ну ок, пробую поменять на 'Array', делаю всё то же самое, но не работает. Т.е. ошибок нет, значения меняются (вывод в консоль), но родитель не ререндерится.

import React from 'react';
import type { CollapseProps } from 'antd';
import { Collapse, Button, Space } from 'antd';
import { useState } from "react";

// данные определены вовне, имитируют БД
let value1 = false;
let value2 = false;
let value3 = false;



//  previous Props
//interface Props {
//    counter: number;
//    setCounter: (key: number) => void;
//}

// current Props
interface Props {
    numbers: number[];
    setNumbers: (values: number[]) => void;
}


//const Element1 = ({ counter, setCounter }: Props) => {
const Element1 = ({ numbers, setNumbers }: Props) => {

    const handleClick = (key: number) => {
        if (key == 1) {
            value1 = true
            console.log('value1 ', value1.toString())
        }
        else if (key == 2) {
            value2 = true
            console.log('value2 ', value2.toString())
        }
        else {
            value3 = true
            console.log('value3 ', value3.toString())
        }
        //counter++;                
        //setCounter(counter)        
        numbers.push(1);
        setNumbers(numbers);
    }

    return (
        <div>
            <div>
                <Space >
                    <Button
                        onClick={() => handleClick(1)}
                        color={!value1 ? "primary" : "danger"}
                        variant="solid"
                    >Button1
                    </Button>
                    <Button
                        onClick={() => handleClick(2)}
                        color={!value2 ? "primary" : "danger"}
                        variant="solid"
                    >Button2
                    </Button>
                    <Button
                        onClick={() => handleClick(3)}
                        color={!value3 ? "primary" : "danger"}
                        variant="solid"
                    >Button3
                    </Button>
                </Space>
            </div>
        </div>
    );
}


const Element2 = () => {
    return (
        <div>
            <div>
                <p>value1 <b>{value1.toString()}</b></p>
                <p>value2 <b>{value2.toString()}</b></p>
                <p>value3 <b>{value3.toString()}</b></p>
            </div>
        </div>
    );
}


const CollapseComponent: React.FC = () => {
    //const [counter, setCounter] = useState<number>(0); 
    const [numbers, setNumbers] = useState<number[]>([]);

    const items: CollapseProps['items'] = [
        {
            key: '1',
            label: 'Element1',
            children: <Element1 numbers={numbers} setNumbers={setNumbers} />
            //children: <Element1 counter={counter} setCounter={setCounter} />
        },
        {
            key: '2',
            label: 'Element2',
            children: <Element2 />
        }
    ];

    return (
        <div>
            <Collapse items={items} />
        </div>            
    );
};



export default CollapseComponent;