Tengo un ícono de marcación rápida que, cuando se hace clic, debe agregar un elemento de acordeón a la lista de acordeón.

Su atributo onClick llama a una función handleClick que actualmente agrega un objeto a formik.values .

El objeto se agrega al mapa de valores como se esperaba, pero el usuario debe actualizar la pantalla para ver el nuevo elemento de acordeón.

Supongo que no estoy manejando correctamente el cambio de estado en el formulario.

Sé que formik expone el método handleChange , pero no estoy seguro de si debería usarse en este escenario y cómo.

 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>
 );
}