I have a speed dial's icon that, when clicked, should add an accordion item to the accordion list.

Its onClick attribute calls a handleClick function that currently adds an object to formik.values.

The object is added to the values map as expected but the user needs to refresh the screen in order to see the new accordion item.

I guess I'm not properly handling the change of state in the form.

I know formik exposes the handleChange method but I'm not sure if and how it should be used in this scenario.

function AddSpeedDial({formik}) {

    const dialActions = [
        {
            icon: <DinnerDiningIcon />,
            name: 'New Dish',
            handleClick: () => {
                const dishCardsLength = Object.keys(formik.values.dishCards).length;
                formik.values.dishCards[dishCardsLength+1] = {
                    dishName: ''
                }
            }
        }
    ];

    return (
        <Box>
            <SpeedDial>
                {dialActions.map((action) => (
                    <SpeedDialAction
                        key={action.name}
                        icon={action.icon}
                        tooltipTitle={action.name}
                        onClick={action.handleClick}
                    />
                ))}
            </SpeedDial>
        </Box>
    );
}