Get rid of the rectangular border inside TextField in react

Question

Hi How to disabled the inner rectangular border for TextField in React. I do not know why the inner one stays there. I have tried different solutions but it doe not work

This is the style

const useStyles = makeStyles({
inputField: {
    "& label.Mui-focused": {
        color: "tomato",
    },
    "& label": {
        color: "tan",
    },
    "& .MuiOutlinedInput-root": {
        "& fieldset": {
            borderColor: "tan",
        },
        "&:hover fieldset": {
            borderColor: "tan",
        },
        "& .Mui-focused fieldset": {
            borderColor: "tan",
        },
    },

},
});

This is the main

const Register = () => {
return (
    <div>
        <h1>New User Registration</h1>
        <form className={classes.root} noValidate autoComplete="off">
            <TextField
                border-style={"solid"}
                className={classes.inputField}
                label={"Email Address"}
                variant={"outlined"}
                onChange={(e) => setEmail(e.target.value)}
            >
            </TextField>
        </form>
    </div>
);

};