I am building a web app in which I am trying to update user profile data, I am fetching data (profile data) of the user from my server and trying to populate in the form fields now when I am setting the value={user?.fullName} it is showing when the page gets reloaded but when I do something like this const [fullName, setFullName] = useState(user?.fullName || ""); and set value={fullName} then when we reload the page the field is empty but when I move to a different page and come to edit the profile page I see my form fields are not empty now.
what i am trying to make is a user update profile page where all his data will be present in form and he can change any of the data and click submit to save that data on backend so when I first fetch the data on reload the forms are empty but when I change route and come back then form is not empty, I want to show data even if someone reload the update profile page
Why is this happening and how can I solve this issue?
const { user, isLoading: loader } = useLoggedInUser()
const [fullName, setFullName] = useState<string>(user?.fullName || '')
<TextField
fullWidth
id="fullName"
label="Full Name"
size="small"
value={fullName}
onChange={(e: ChangeEvent<HTMLInputElement>) => setFullName(e.target.value)}
/>
this is the code when I first come to the update profile page and hit refresh on this page the fields are empty but when I move to other page and come back fields are filled with data came from backend