I have a login component like this

const CssTextField = styled(TextField)({
"& label.Mui-focused": {
  color: "#71716A",
},
"& .MuiInput-underline:after": {
  borderBottomColor: "#71716A",
},
"& .MuiOutlinedInput-root": {
  "&.Mui-focused fieldset": {
    borderColor: "#71716A",
  },
},});

 const [form, setForm] = useState({
name: "",
password: ""});

const handleChange = (e) => {
e.preventDefault();
setForm({ ...form, [e.target.name]: e.target.value });};

And return this

 <div className="login-container">
  <h3> What is your name?</h3>
  <FormControl>
    <Box sx={{ display: "flex", alignItems: "flex-end" }}>
      <AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
      <CssTextField
        variant="standard"
        fullWidth
        id="name"
        label="Name"
        name="name"
        onChange={(e) => handleChange(e)}
        value={form.name}
      />
    </Box>
  </FormControl>
</div>

Even I have the handleChange and the old version of material Ui works fine. Please help me thank you