This is my first question, and english is not my first language, sorry if my question is hard to understand

I was trying to make simple CRUD app with mysql database and react as the frontend, and i got the following error when i try to update the data :

Cannot read properties of null (reading  studentId )
TypeError: Cannot read properties of null (reading  studentId )
    at getUserById (http://localhost:3000/static/js/bundle.js:420:25)

here my code :

import React,{useState,useEffect} from  react ;
import axios from  axios ;
import { useNavigate,useParams } from  react-router-dom ;

const EditUser = () => {
const [studentId,setId] = useState("");
const [name,setName] = useState("");
const [address,setAddress] = useState("");
const [phone,setNumber] = useState("");
const navigate = useNavigate();
const { id }  = useParams();

useEffect(() => {
    getUserById();
  }, []);

const updateUser = async (e) => {
    e.preventDefault();
    try {
        await axios.patch(`http://localhost:8800/users/${id}`, {
            studentID,
            name,
            address,
            phone
        });
        navigate("/")
    } catch (error) {
        console.log(error);
    }
}


const getUserById = async () => {
    const response = await axios.get(`http://localhost:8800/users/${id}`);
    console.log(response);
    setId(response.data.studentId);
    setName(response.data.name);
    setAddress(response.data.address);
    setNumber(response.data.phone)
  };

  return (
    <div className="columns mt-5 is-centered">
        <div className="column is-half">
            <form onSubmit={updateUser}>
            <div className="field">
                    <label className="label">ID</label>
                    <div className="control">
                        <input 
                        type="text" 
                        className="input" 
                        value = {studentId} 
                        onChange={(e)=> setId(e.target.value)}
                        placeholder= id 
                    />
                    </div>
                </div>
                <div className="field">
                    <label className="label">Name</label>
                    <div className="control">
                        <input 
                        type="text" 
                        className="input" 
                        value = {name} 
                        onChange={(e)=> setName(e.target.value)}
                        placeholder= name 
                    />
                    </div>
                </div>
                <div className="field">
                    <label className="label">Address</label>
                    <div className="control">
                        <input 
                        type="text" 
                        className="input" 
                        value = {address} 
                        onChange={(e)=> setAddress(e.target.value)}
                        placeholder= address 
                    />
                    </div>
                </div>
                <div className="field">
                    <label className="label">Phone Number</label>
                    <div className="control">
                        <input 
                        type="text" 
                        className="input" 
                        value = {phone} 
                        onChange={(e)=> setNumber(e.target.value)}
                        placeholder= phone number 
                    />
                    </div>
                </div>
                <div className="field">
                    <button type="submit"className= button is success >Update</button>
                </div>
            </form>
        </div>
    </div>
  )
}

export default EditUser

I want the data to appeared in the form, but got the error in the title. When i log response.data it return null value.

My API is working in postman, so i think the problem is in my react app

I also got the following warning :

React Hook useEffect has a missing dependency: getUserById . Either include it or remove the dependency array.

edit :

the router from my app.js

<BrowserRouter>
      <Routes>
        <Route path="/" element ={<UserList/>} />
        <Route path="add" element ={<AddUsers/>} />
        <Route path="edit/user/:id" element ={<EditUser/>} />
      </Routes>
    </BrowserRouter>

console.log(response) show the following object :

{
    "data": null,
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-length": "4",
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:8800/users/1"
    },
    "request": {}
}

Thanks in advance