React hook : Скопировать один массив из дива и вставить в другой

суть проблемы в том, что у меня есть условно три блока, в один блок с помошью инпута я добавляю задачу, далее из этого блока при нажатие кнопки я должен отрпавить данные в другой блок, на этом моменте я и застрял, так как блок отправляеться, а вся информация из него нет, туда приходит просто массив в который вложен другой масив с данными:(

<div className="page__page">
            <div className="page__todo">
                        {inMessage.map((card)=>{
                            return(
                                <Card   key={card.id}
                                        card={card}
                                        deleteCard={deleteCard}
                                        sendCard={sendCard}
                                />
                            )
                        })}
             </div>
            <div className="page__progress">
                   {inProgress.map((props)=>{
                        return(
                            <Props  key={props.id}
                                    props={props}
                            />
                        )
                    })}
            </div>
     </div>

Код который отвечает за отправку :

 const [inMessage, setMessage] = React.useState([])
    const [inProgress, setProgress] = React.useState([])     
function sendMessage(inInput){
            if(inInput) {
                const newItem = {
                    id: Math.random().toString(15).substr(2, 10),
                    task: inInput,
                }
                setMessage([...inMessage, newItem])
            }
        }
    
        function sendCard(){
                setProgress([...inProgress, inMessage])
        }

И подскажите пожалуйста, в данный момент я для решения использую 3 разных дива, но правильно ли я думаю, что можно создать скажем массив Data, в который с помошью хука поместить три поля с разными id, замапить его и работать в пределах этого массива ?