MaterialUI Label misplacement on Select component - reactjs

Question

I have a form displaying inside a modal component with several text inputs and select components but somehow the Select Labels are showing at the top left corner of the form. I followed the solution explained here but I am obtaining the same result. Another problem is that when clicking on one Select the other seems to be linked and show focused. I am not experienced with Material and I have been using it for a couple of days only. I really like it but I am a bit lost here. Also, the Select on the left is not aligned with the Text input.
This is the Dialog/Form code. Disregard the Select onChange event functions
{/* Modal Dialog to add the Form*/}
<Dialog maxWidth="100" open={createOpportunity} onClose={handleDialogClose}>
<DialogTitle align='center' id="form-dialog-title">Add New Opportunity</DialogTitle>
<FormControl className={classes.formMainClass}>
<div className='formDivs'>
<TextField autoFocus margin="dense" id="name" label="Opportunity Name" type="text" fullWidth/>
<TextField margin="dense" id="address" label="Address" type="text" fullWidth/>
<TextField margin="dense" id="city" label="City" type="text" fullWidth/>
<div className='state-zip'>
<InputLabel htmlFor="state">State</InputLabel>
<Select fullWidth inputProps={{id: "state"}} value={value} onChange={event => setValue(event.target.value)}>
<MenuItem value="">Empty Value for First Option</MenuItem>
<MenuItem value="Hey">Hey</MenuItem>
</Select>
<span> </span>
<TextField margin="dense" id="zip" label="Zip" type="text" fullWidth/>
</div>
<TextField margin="dense" id="architect" label="Architect" type="text" fullWidth/>
<TextField margin="dense" id="consultant" label="Consultant" type="text" fullWidth/>
<TextField margin="dense" id="duedate" label="Due date" type="date" fullWidth InputLabelProps={{shrink: true}}/>
</div>
<div className='formDivs'>
<InputLabel htmlFor="manager">Manager</InputLabel>
<Select fullWidth inputProps={{id: "manager"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<div className='state-zip'>
<InputLabel htmlFor="status">Status</InputLabel>
<Select fullWidth inputProps={{id: "status"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<span> </span>
<InputLabel htmlFor="source">Source</InputLabel>
<Select fullWidth inputProps={{id: "source"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
</div>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="description" label="Description" type="text" fullWidth/>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="notes" label="Notes" type="text" fullWidth/>
</div>
</FormControl>
<DialogContent>
<DialogContentText>Opportunities text.</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary">Cancel</Button>
<Button onClick={handleDialogClose} color="primary">Save</Button>
</DialogActions>
</Dialog>
Code for the Styling
.opportunities {
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
width: auto;
}
.top-buttons {
margin-top: 15px;
margin-bottom: 0;
width: 90%;
}
.formDivs {
width: 50%;
margin: 1% 3%;
}
.state-zip, .manager {
display: flex;
flex-direction: row;
}
Any advise, comment or suggestion is highly appreciated.

Answer 1

the issue is happening because you're using the FormControl element in the wrong way. This element is used to get extra control/feature/functionality over the individual form input.
So wrap your input elements with FormControl individually if you're planning to use FormControl functionalities and use div or form as a wrapping element instead of FormControl in your current code(form will be better).
Here is a related answer
Here is a working demo with the form tag :