on selecting the dropdown fields, my values are coming side by side instead of one below another. MAZ and NAZ are two different items.

                                            <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>

This is the code to display dropdowns. Can someone suggest me a way to rearrange my dropdown value to row orientation