I have a problem that is appearing in a lot of my react projects when i call an api. This request returns a response, but the response data isn't appearing in the react view (on the browser), even call the set function of a state to update the data isn't working.

I am forced to interact with the dom to trigger the response's coming (like click on a button, type something, etc.) or to pass the data to a child component. Do anyone has an idea on that problem ?

This is my fetch function which is working well

const afficherBase = (baseId, table, view, fields = []) => {
let base = Airtable.base(baseId);

return new Promise((resolve, reject) => {
  let recs = [] 
    base(table).select({
      //maxRecords : 15,
      view : view,
      fields : fields
  }).eachPage(function page(records,fetchNextPage) {

    recs.push(records)
    fetchNextPage();

  }, function done(err) {
    if(err) { console.log(err); reject(err)}
  })
  console.log(recs)
  resolve(recs)
})

}

And that's my useEffect start function for my component :

useEffect(() => {
    const asyncPrepare = async() => {
      let res = await Promise.resolve(renderView("a","ContactFull","Coordonnées"))
      console.log(res)
      setTimeout(() =>{console.log("rerender ?")}, 4000)
      setBdd({...bdd, records : await res})
      // setUpdating(true)
      // setTestUpdate(true)
      console.log(bdd.records)
    }

    const prepare = () => {
      renderView("a","Animation Communauté","Grid view")
        .then((res) => {
          console.log(res)
          let data = res
          return data
        })
        .then((data) => {
          console.log("data")
          console.log(data)
          setBdd({...bdd, records : data})
          console.log(bdd.records)
        })
        .catch((err) => {
          console.error(err)
        })
    }
    prepare()
    
  },[])

Do you have an idea to resolve this problem ?