show error message on mui Input with adornment component

Question

I have below mui component which renders and input adornment. Here is the example.

<FormControl fullWidth sx={{ m: 1 }} variant="standard">
                  <InputLabel htmlFor="standard-adornment-amount">
                    Paid Fees
                  </InputLabel>
                  <Input
                    {...field}
                    name="paidFees"
                    id="standard-adornment-amount"
                    error={Boolean(errors["paidFees"])}
                    startAdornment={
                      <InputAdornment position="start">₹</InputAdornment>
                    }
                  />
                </FormControl>

From the Input API it accepts prop error but there is no prop to pass helperText to show the error message.

Answer 1

Maybe you can change to using TextField instead of the Input. Here is the TextField code example you can try.

<TextField
 error
 id="outlined-error-helper-text"
 label="Paid Fees"
 helperText="Incorrect fees."
/>