function Profile() {


    const [userId, setUserId] = useState(localStorage.getItem("user_id"))
    const [fname, setFname] = useState()
    const instance = axios.create({baseURL: server});

    useEffect( ()=> {
      
      const getUserValues = async () => {

        const response = await instance.get(
          `Users?id=${userId}`

        )
          setFname(response.data[0].fname)
          console.log(response.data[0].lname)
      }
      getUserValues();
    },[])



    const editValues = {
      firstname: fname,
    };

    const [editUserValue, setEditValue] = useState(editValues);


    console.log(fname) return( <input className="form-control" type="text" name="firstname" value={editUserValue.firstname} )

I'm having issues on getting my editvalues to display in the input because of the rendering that react has on usestate. In the console.log(fname) i get first a undefined then another console log of the value that is needed. But i cant get that value to display on the input.

The updated value should be taken by editvalues, but editvalues only takes the non updated data.

Any suggestions?