React: the data I insert is NULL in my DB

After filling in the form the memorialpage object gets made and added to the db. From my form I get my data and everything is good to go except for the address that is get. By using react-geocode I get the latitude and the longitude which I need, but the objects get made and posted before I can get the lat and lng so in the DB these are just NULL.

I know that my mistake is that I am not awaiting the geocoder but I have tried making it into a function but still no luck.

Thanks for your help!

const onSubmit = async (data) => {

    if (image !== null) {
      await handleUpload();
    };
    
    //Transforming the address that we get to latitude and longitude
    Geocode.setApiKey("x");
    Geocode.setLanguage("nl");
    Geocode.setRegion("be");
    //Google geocoder returns more than one address for given lat/lng, according to google docs, ROOFTOP param returns most accurate result
    Geocode.setLocationType("ROOFTOP");
    Geocode.fromAddress(data.Adres).then(
      (response) => {
        const { lat, lng } = response.results[0].geometry.location;
        console.log(lat, lng);
        setAdresLatitude(lat);
        setAdresLongitude(lng);
      },
      (error) => {
        console.error(error);
      }
    );

    //Object for memorialPage
    let memorialPage = {
      FirstName: dataMemorial.FirstName,
      LastName: dataMemorial.LastName,
      BirthDate: dataMemorial.BirthDate,
      DateOfDeath: dataMemorial.DateOfDeath,
      Obituary: null,
      Quote: data.Quote,
      QuoteAuthor: data.QuoteAuthor,
      IntroText: data.IntroText,
      Latitude: adresLatitude,
      Longitude: adresLongitude,
      IsUndertaker: null,
      Undertakers_Id: null,
    };

    await app.put(`/api/update-memorialpages/`, memorialPage, axiosConfig);

    //Post adminhasMemorialPage
    await app
      .post(`/post/admin-has-memorialpage/`, idChecker, axiosConfig)
      .then((res) =>
        history.push({
          pathname: "/memorialpage-form-3",
          state: memorialPage,
        })
      );
  };

You should await for the Geocode.fromAddress response before populating the memorialPage object if you are using an async function.
Also, there is no need to use the then for the post call if you are using await.

Try to change your code like this:

const onSubmit = async (data) => {
  if (image !== null) {
    await handleUpload();
  }

  //Transforming the address that we get to latitude and longitude
  Geocode.setApiKey('x');
  Geocode.setLanguage('nl');
  Geocode.setRegion('be');
  //Google geocoder returns more than one address for given lat/lng, according to google docs, ROOFTOP param returns most accurate result
  Geocode.setLocationType('ROOFTOP');

  try {
    const response = await Geocode.fromAddress(data.Adres)
    const { lat, lng } = response.results[0].geometry.location;
    setAdresLatitude(lat);
    setAdresLongitude(lng);

    //Object for memorialPage
    let memorialPage = {
        FirstName: dataMemorial.FirstName,
        LastName: dataMemorial.LastName,
        BirthDate: dataMemorial.BirthDate,
        DateOfDeath: dataMemorial.DateOfDeath,
        Obituary: null,
        Quote: data.Quote,
        QuoteAuthor: data.QuoteAuthor,
        IntroText: data.IntroText,
        Latitude: adresLatitude,
        Longitude: adresLongitude,
        IsUndertaker: null,
        Undertakers_Id: null,
    };

    await app.put(`/api/update-memorialpages/`, memorialPage, axiosConfig);

    //Post adminhasMemorialPage
    await app.post(`/post/admin-has-memorialpage/`, idChecker, axiosConfig)
    
    history.push({
        pathname: '/memorialpage-form-3',
        state: memorialPage,
    })
  } catch (err) {
      console.log(err)
  }
};