al seleccionar los campos desplegables, mis valores aparecen uno al lado del otro en lugar de uno debajo del otro. MAZ y NAZ son dos elementos diferentes.

 <Select variant='outlined' id='zone' className="zone_select" defaultValue={formik.values.zone} onChange={(e) => handleInputChange("zone", e.target.value)} disabled={isDisabled} > {zones && zones.map((zone) => ( <MenuItem key={zone.id} value={zone.id} > {zone.zone_name} </MenuItem> ))} </Select>

Este es el código para mostrar menús desplegables. ¿Puede alguien sugerirme una forma de reorganizar mi valor desplegable a la orientación de la fila?