How to disable a Textfield in Material UI when used with Formik

Question

I have a resulable Material UI textfield that I am using with my formik form -

<Fieldname="reportType"
    label="Report Type"
    disabled
    as={TextFieldOutLined}
/>

I want to make my reportType disabled. When I am passing disabled like above to my TextFieldOutLined it is not working.

Below is my TextFieldOutLined snippet.

const TextFieldOutLined = ({ label, disabled, ...props }) => {
    const classes = useStyles();

    const [field] = useField(props);
    return (
        <TextField
            className={classes.formControl}
            {...field}
            {...disabled}

Answer 1

You should pass disabled={disabled} to your TextField component to disable your TextField when the value of disabled prop is truthy.

<TextField
    className={classes.formControl}
    {...field}
    disabled={disabled}