How to push element inside useState array AND deleting said object in a dynamic matter using React hooks (useState)?

I'm most likely not googling this issue correctly, but after a lot of research I haven't figured out the issue here, so bare with me on this one.

**The situation**:

I have a wrapper JSX component which holds my React hook (useState). In this WrapperComponent I have the array state which holds the objects I loop over and generate the child components in the JSX code. I pass down my onChangeUpHandler which gets called every time I want to delete a child component from the array.

Wrapper component:

```
export const WrapperComponent = ({ component }) => {

    // ID for component
    const { odmParameter } = component;
    const [wrappedComponentsArray, setWrappedComponentsArray] = useState([]);
    const deleteChildComponent = (uuid) => {
        // Logs to array "before" itsself
        console.log(wrappedComponentsArray);
        /* 
         Output: [{"uuid":"acc0d4c-165c-7d70-f8e-d745dd361b5"}, 
         {"uuid":"0ed3cc3-7cd-c647-25db-36ed78b5cbd8"]
        */

        setWrappedComponentsArray(prevState => prevState.filter(item => item !== uuid));

        // After
        console.log(wrappedComponentsArray);
        /*
          Output: [{"uuid":"acc0d4c-165c-7d70-f8e-d745dd361b5",{"uuid":"0ed3cc3- 
         7cd-c647-25db-36ed78b5cbd8"]
         */
    };

    const onChangeUpHandler = (event) => {
        const { value } = event;
        const { uuid } = event;

        switch (value) {
            case 'delete':
                // This method gets hit
                deleteChildComponent(uuid);
                break;
            default:
                break;
        }
    };

    const addOnClick = () => {

        const objToAdd = {
            // Generate uuid for each component
            uuid: uuid(),
            onChangeOut: onChangeUpHandler,
        };

        setWrappedComponentsArray(wrappedComponentsArray => [...wrappedComponentsArray, objToAdd]);

        // Have also tried this solution with no success
        // setWrappedComponentsArray(wrappedComponentsArray.concat(objToAdd));
    };

    return (
        <>
            <div className='page-content'>
                {/*Loop over useState array*/}
                {
                    wrappedComponentsArray.length > 0 &&
                    <div>
                        {wrappedComponentsArray.map((props) => {
                            return <div className={'page-item'}>
                                <ChildComponent {...props} />
                            </div>;
                        })
                        }
                    </div>
                }
                {/*Add component btn*/}
                {wrappedComponentsArray.length > 0 &&
                    <div className='page-button-container'>
                        <ButtonContainer
                            variant={'secondary'}
                            label={'Add new component'}
                            onClick={() => addOnClick()}
                        />
                    </div>
                }
            </div>
        </>
    );
};

```

Child component:

```

export const ChildComponent = ({ uuid, onChangeOut }) => {
    return (
        <>
            <div className={'row-box-item-wrapper'}>
                <div className='row-box-item-input-container row-box-item-header'>
                    <Button
                        props={
                            type: 'delete',
                    info: 'Deletes the child component',
                    value: 'Delete',
                    uuid: uuid,
                    callback: onChangeOut
                  }
                />
                </div>

                <div>
                    {/* Displays generated uuid in the UI */}
                    {uuid}
                </div>

            </div>
        </>
    )
}

```

As you can see in my UI my adding logic works as expected (code not showing that the first element in the UI are not showing the delete button):

[![enter image description here](https://i.stack.imgur.com/Bj3EM.png)](https://i.stack.imgur.com/Bj3EM.png)

Here is my problem though:

Say I hit the add button on my WrapperComponent **three** times and adds three objects in my wrappedComponentsArray gets rendered in the UI via my mapping in the JSX in the WrapperComponent.

Then I hit the delete button on the **third** component and hit the deleteChildComponent() funtion in my parent component, where I console.log my wrappedComponentsArray from my useState.

The problem then occurs because I get this log:

```
(2) [{…}, {…}]

```

even though I know the array has **three** elements in it, and does **not** contain the third (and therefore get an undefined, when I try to filter it out, via the UUID key.

How do I solve this issue? Hope my code and explanation makes sense, and sorry if this question has already been posted, which I suspect it has.