Error after duplicate a tab: Rendered more hooks than during the previous render

I am creating a block in WordPress. It is a tab block. I want to create a new tab with the click of a button, but get an error: Rendered more hooks than during the previous render.

I've tried everything but can't get it to work. When I release a console.log in the test.map I do get the correct items plus the copied item.

// Edit function (responsible for wp-admin post edit screen)
const edit = props => {
    
    const { tabContent } = props.attributes;

    // active tab = 1
    const [test, handleUpdate] = useState(tabContent);
    const [count, setTab] = useState(1);
    
    const correctID = count-1;

    const onClickDuplicate = () => {

        const duplicatedItem = test.filter((item, key) => key === correctID);

        const newArray = [...test, ...duplicatedItem];

        //newArray.push(duplicatedItem);

        //props.setAttributes({ tabContent: newArray });

        handleUpdate(newArray);

        
    };
    //console.log(test);

    
  return (
    <Fragment>
        <InspectorControls>
            <PanelBody title={ __('test') }>
        
            </PanelBody>
        </InspectorControls>
        <BlockControls
            controls={ [
                {
                    icon: <BiChevronLeft />,
                    title: __( 'Links' ),
                    onClick: () => {
                        console.log('links')

                    },
                },
                {
                    icon: <BiChevronRight />,
                    title: __( 'Rechts' ),
                    onClick: () => {
                        console.log('rechts')
                        
                    },
                },
                {
                    icon: <BiPlus />,
                    title: __( 'Toevoegen' ),
                    onClick: () => {
                        console.log('toevoegen')
                        
                    },
                },
                {
                    icon: <BiDuplicate />,
                    title: __( 'Duplicate' ),
                    onClick: onClickDuplicate,
                },
                {
                    icon: <BiTrash />,
                    title: __( 'Verwijderen' ),
                    onClick: () => {
                        console.log('verwijderen')
        
                    },
                },
            ] }
        />
        <Tabs activeTab="1" className="" ulClassName="" activityClassName="bg-success" onClick={(event, tab) => setTab(tab)} >
            {test.map((tabs) => { 
                console.log(tabs);
                return (
                    <Tab title={
                        <RichText 
                            placeholder={__("Tab", "podkit")}
                            value={tabs.title}
                            onChange={onChangeTabUpdateTitle}
                            allowedFormats={ [ 'core/bold' ] }

                        />
                    } className="mr-3">
                        <RichText 
                            placeholder={__("Content", "podkit")}
                            value={tabs.content}
                            onChange={onChangeTabUpdateContent}
                        />
                    </Tab>
                ) 
            })}
        </Tabs>

    </Fragment>
  );
}