Anyone knows why this is happening. I am using material UI. the default value and the label for the field are overlapping for some reason.

Here's the code for the rendering of the fields:

{formSchema.map((element, index) => (
                        <Grid key={element.name} className={classes.gridItems} item sm={6}>
                            {formInputRender(element, index)}
                        </Grid>
                    ))}

and this is the field in the forSchema array:

4:
dataType: "number"
defaultValue: null
mandatory: false
name: "Amount"
validation: {minLength: null, maxLength: null}
[[Prototype]]: Object

formInputRender function:

case 'number':
                return (
                    <TextFieldElement
                        name={formElement.name}
                        type="number"
                        required={formElement.mandatory}
                        label={formElement.name}
                        value={formik.values[formElement.name]}
                        onChange={formik.handleChange}
                        onBlur={blurHandler}
                        onKeyDown={(evt) => evt.key === 'e' && evt.preventDefault()}
                        error={errorHandler(formElement)}
                        helperText={errorHandlerText(formElement)}
                        className={classes.flexGrow}
                        InputProps={
                            apiFields.includes(formElement.name)
                                ? {
                                      endAdornment: (
                                          <InputAdornment position="end" style={{ outline: 'none' }}>
                                              {apiErrorHandler(formElement.name)}
                                          </InputAdornment>
                                      )
                                  }
                                : false
                        }