Can not push React component to array

Question

I have the following class:

const NewPage = () => {
    const [blocks, setBlocks] = useState(false);
    const [needsShowImageModal, setNeedsShowImageModal] = useState(false);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks, 
            <TextBlock 
                key={key}
                blockKey={key}
                deleteButtonHandler={deleteButtonHandler} 
            />
        ]);
        console.log(blocks);
    };
    return (.....);
}

For some reason the first time textButtonHandler is called it doesn't add the item to the array. I have checked the length of the array in the console and it is 0. What am I doing wrong here?

EDIT: After suggestions I now have:

const NewPage = () => {
    const [blocks, setBlocks] = useState([]);
    const [needsShowImageModal, setNeedsShowImageModal] = useState([]);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks,
            { key, deleteButtonHandler}
        ]);
    };

    const deleteButtonHandler = (blockKey) => {
        console.log(blocks); // Empty
    };

    return (
        <div>
            <ImageModal 
                show={needsShowImageModal}
                onHide={() => setNeedsShowImageModal(false)}
                insertButtonHandler={insertImageHandler}
            />
            <div className="d-flex">
                <NewPageSidebar
                    textButtonHandler={textButtonHandler}
                    imageButtonHandler={imageButtonHandler}
                    spacingButtonHandler={spacingButtonHandler}
                />
                <NewPageContent blocks={blocks} />
            </div>
        </div>
    );
};

export default NewPage;

However if I add a block using textButtonHandler and then fire deleteButtonHandler the array is still empty.

Answer 1

1- you should add component in array by name and not wrap it up like < ../> and when using it in jsx you can do that, so your object can be like this:

{
   key:key,
   deleteButtonHandler:deleteButtonHandler,
   comp:TextBlock
}

2- if all of object in blocks have the same element, you don't need to have array of elements, array of object with only info for comp is enough

3-suggested solution:

const NewPage = () => {
    const [blocks, setBlocks] = useState([]);
    const [needsShowImageModal, setNeedsShowImageModal] = useState(false);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks, 
           {
             key:key,
             deleteButtonHandler:deleteButtonHandler
           }
        ]);
        console.log(blocks);
    };
    return (<div> {blocks.map((info)=>(...))} </div>);
}

in above code after creating list of blocks as info holder you can use it by .map like example.