How to use useRef with Material UI-CodePudding

There is something wrong with the code but I didn't found what is it exactly, I guess the question is how to use useRef with Material UI? I'm trying to code a login page, the code worked fine with original but when I used Material UI's it stopped.

The Code:

import { useContext, useRef } from "react";
import { Context } from "../../context/Context";
import axios from "axios";
import { useState } from "react"
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import EmailIcon from '@mui/icons-material/Email';
import LockIcon from '@mui/icons-material/Lock';

    export default function Login() {
      const userRef = useRef();
      const passwordRef = useRef();
      const { dispatch, isFetching } = useContext(Context);
      const [error, setError] = useState(false);
    
      const handleSubmit = async (e) => {
        e.preventDefault();
        dispatch({ type: "LOGIN_START" });
        try {
          const res = await axios.post("/auth/login", {
            username: userRef.current.value,
            password: passwordRef.current.value,
          });
          dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
        } catch (err) {
          dispatch({ type: "LOGIN_FAILURE" });
          setError(true)
        }
      };
    return (
    <div className="login">
    <form className="loginForm" onSubmit={handleSubmit}>
    <Box>
    <div>
                      <TextField 
                      type="email" 
                      required
                      id="outlined-basic" 
                      label="Email" 
                      variant="outlined" 
                      ref={userRef}
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <EmailIcon />
                          </InputAdornment>
                        ),
                      }}
                      />
    
                      <TextField 
                      id="outlined-basic" 
                      label="Password" 
                      variant="outlined" 
                      ref={passwordRef}
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <LockIcon />
                          </InputAdornment>
                        ),
                      }}
                      />
    </div>
    </Box>
    </form>
    </div>
    )
    }

I don't know if using ref is correct in Material UI!

CodePudding user response：

The better way to work with MUI TextField is to use a state like this instead of a ref:

const [userEmail, setUserEmail] = useState("")

return <TextField ... value={userEmail} onChange={(e)=>{setUserEmail(e.target.value)}} />

However if you still want to use a useRef instead, maybe the prop inputRef is what you're seeking