Можно ли передать props в useState?

Написал код компонента:

export const Switcher = (
    {
        activeButton,
        setActiveButton,
        setResult,
        setTmpResult,
        itemRefs
    }: {
        activeButton: number,
        setActiveButton: any,
        setResult: any,
        setTmpResult: any,
        itemRefs: any
    }) => {
    function handleSwitcherClick(index: number) {
        setActiveButton(index);
    }

    const [button, setButton] = useState([
        {img: 'runtime.svg', text: 'Runtime'},
        {img: 'constructor.svg', text: 'Constructor'}
    ])

    return (
        <div className='buttons'>
            {button.map((btn, i) =>
                <button
                    onClick={() => handleSwitcherClick(i)}
                    className={activeButton === i ? 'active' : ''}>
                    <img src={btn.img} alt=""/>{btn.text}</button>
            )}
        </div>
    )
}

При нажатии на кнопку всё работает как и должно, но лишь при условии, что компонент вставлен в код напрямую, например так:

<div className='App'>
    <Switcher activeButton={activeButton} setActiveButton={setActiveButton} setResult={setResult} setTmpResult={setTmpResult} itemRefs={itemRefs}/> 
</div>

Но если я вставлю этот кусок кода в useState для дальнейшего прохождения по циклу, например такого:

   const [boards, setBoards] = useState([
        {id: 1, class: "Elements", items: [
            {title: <Display result={result} />},
            {title: <Operators setResult={setResult} tmpResult={tmpResult} setTmpResult={setTmpResult} activeButton={activeButton} itemRefs={itemRefs}/>},
            {title: <Numbers result={result} setResult={setResult} tmpResult={tmpResult} setTmpResult={setTmpResult} activeButton={activeButton} itemRefs={itemRefs}/>},
            {title: <Equal setResult={setResult} tmpResult={tmpResult} setTmpResult={setTmpResult} activeButton={activeButton} itemRefs={itemRefs}/>}]},
        {id: 2, class: "dropped filled", buttons: <Switcher activeButton={activeButton} setActiveButton={setActiveButton} setResult={setResult} setTmpResult={setTmpResult} itemRefs={itemRefs}/>, items: []}
    ])

    return (
        <div className='App'>
            {boards.map((board, index) =>
                <div className="board" key={index}
                     onDragOver={handleDragOver} onDrop={handleDrop}>
                    <div className="switchButtons">{board.buttons}</div>
                    <div className={board.class}>
                        {board.items.map((item, i) =>
                            <div className="item" key={i}
                                draggable={true}
                                onDragEnd={handleDragEnd} onDoubleClick={e => handleDoubleClick(e, i)}
                                onDragLeave={handleDragLeave} onDragOver={handleDragOver} onDrop={handleDrop}
                                onDragStart={e => handleDragStart(e, i)}>
                                {item.title}
                            </div>
                        )}
                    </div></div>
            )}
        </div>
    )

То кнопка уже не работает, куда копать?