React <input> value will not change when edit - reactjs

Question

I'm trying to have an edit page to update the details of the existing object. I have some input elements to contain the value. But when I rendered the page, the values displayed in the input boxes will not allow me to change in view - when I delete or type in new, the values in the boxes will never change. Can anyone help to figure out the matter?
import React, {useEffect, useState} from "react";
import Sidebar from "../components/Sidebar";
import {FontAwesomeIcon} from "#fortawesome/react-fontawesome";
import {useNavigate, useParams} from "react-router-dom";
import Axios from "axios";
import axios from "axios";
function CourseEdit() {
let navigate = useNavigate();
const [fname, setFname] = useState("");
const [lname, setLname] = useState("");
const [gender, setGender] = useState("");
const [age, setAge] = useState("");
const [description, setDescription] = useState("");
const [payment, setPayment] = useState("0");
const [student, setStudent] = useState({});
const {id} = useParams();
const editStudent = (id) => {
Axios.put('http://localhost:3001/student_edit', {
fname: fname,
lname: lname,
gender: gender,
age: age,
description: description,
payment: payment,
id: id,
}).then(() => {
alert('Student updated');
navigate(`../students/detail/${id}`);
console.log("student updated");
});
}
useEffect(() => {
axios.get(`http://localhost:3001/students/${id}`).then((response) => {
setStudent(response.data[0]);
// console.log(response.data[0].id);
})},[id]);
return (
<div className="grid-container">
<Sidebar/>
<div className="main_content grid-2">
<div className="details">
<div className="icon" style={{color: "#f7931e"}}>
<FontAwesomeIcon icon="user"/> Edit STUDENT
<div className="back-button" onClick={() => navigate(-1)}>
<FontAwesomeIcon icon="arrow-alt-circle-left"/>BACK
</div>
</div>
<div className="detail-content" style={{marginTop: "1.2em"}}>
<table>
<tbody>
<tr>
<td className="td-left" style={{width: "100%"}}>
<label htmlFor="StudentName">Student First Name:</label>
</td>
<td className="td-right" style={{width: "85%"}}>
<input className="mb" type="text" name="studentFname" id="detail_input"
value={student.fname} onChange={(event) => {
setFname(event.target.value)
}} required/>
</td>
</tr>
<tr>
<td className="td-left" style={{width: "100%"}}>
<label htmlFor="StudentName">Student Last Name:</label>
</td>
<td className="td-right" style={{width: "85%"}}>
<input className="mb" type="text" name="studentLname" id="detail_input"
onChange={(event) => {
setLname(event.target.value)
}} value={student.lname} required/>
</td>
</tr>
...
...
...
</tbody>
</table>
<div>
<button className="green_bt option_list round mr" onClick={() => {editStudent(`${id}`)}}>Save
</button>
<button className="red_bt option_list round mr" onClick={() => navigate(-1)}>Cancel
</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default CourseEdit;

Answer 1

To set a default value for an input element in React:
1 - Pass the default value as a parameter to the useState hook for controlled fields.
2 - Set the defaultValue prop on uncontrolled input fields
in your case you're using controlled input so you have to pass the default to useState like this :
const [fname, setFname] = useState(student.fname);
const [lname, setLname] = useState(student.lname);
and change the input field like this :
<input className="mb" type="text" name="studentFname" id="detail_input"
value={fname} onChange={(event) => { setFname(event.target.value)}}
required/>
and :
<input className="mb" type="text" name="studentLname" id="detail_input"
onChange={(event) => {setLname(event.target.value)}} value={lname}
required/>