Elements getting overlapped in select drop down material ui

I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.

However on the selection of an option the two texts get blurred like this:

Here is the code for the same:

<Grid item xs={6}>
                <FormControl id="Process" style={{ width: "78%" }} size="small">
                  <InputLabel
                    htmlFor="Process"
                    id="Process"
                    style={{
                      marginLeft: 10,
                      top: "50%",
                      transform: "translate(0,-50%"
                    }}
                  >
                    Process
                  </InputLabel>
                  <Select
                    labelId="Process"
                    name="Process"
                    id="Process"
                    onChange={() => this.setState({ addModalShow: true })}
                    defaultValue={values.Process}
                    variant="outlined"
                    inputProps={{
                      id: "Process"
                    }}
                  >
                    <MenuItem value="1">Implemented</MenuItem>
                    <MenuItem value="2">Implementation in Progress</MenuItem>
                    <MenuItem value="3">Not Implemented</MenuItem>
                  </Select>
                </FormControl>
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={() => this.setState({ addModalShow: true })}
                  size="small"
                  style={styles.button2}
                >
                  +
                </Button>
                <label
                  id="process"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Process cannot be blank
                </label>
              </Grid>
            </Grid>

Could anyone please tell me why this is happening?

Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.

If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:

1. Remove style customization, I mean remove this css:

   style={{
      marginLeft: 10,
      top: "50%",
      transform: "translate(0,-50%"
   }}
   

2. put a condition to InputLabel content. Something like:

   {values.Process === "" && "Process"}
   

In this way, Process label will be visible only if you haven't selected nothing on Select component.

Here a codesandbox example.