[SOLVED] data fetched from useQuery don't get populated properly

const [userData, setUserData] = useState<userDataTypes>();
// get user data
  const {isLoading: isLoadingUserData} = useQuery(
    ['userData', userId],
    async () => {
      return await axiosClient.get('/user/');
    },
    {
      onSuccess: (res) => {
        setUserData(res.data);
      },
      onError: (err) => {
        console.error(err);
        setFormDataErr('error loading data');
      },
    },
  );
  console.log('USER DATA', userData);

  const [formData, setFormData] = useState({
    firstname: userData?.firstname ? userData.firstname : '',
    lastname: userData?.lastname ? userData.lastname : '',
  });

.... .....
<Input
          label="First name"
          name="firstname"
          type="text"
          title="First name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.firstname}
          handleChange={(e): void => onChange(e)}
        />
        <Input
          label="Last name"
          name="lastname"
          type="text"
          title="Last name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.lastname}
          handleChange={(e): void => onChange(e)}
        />