ReactJS: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

Question

I keep facing the above error when trying to return some jsx code based on the data from api.

Here is the function i am using:

const getBookings = rid => {
    return new Promise((resolve, reject) => {
        fetch(`${process.env.REACT_APP_SERVER_URL}/bookings/${rid}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            // signal
        }).then(res => res.json())
            .then(data => {
                if (!data.error) {
                    setBookings(data.data)
                    resolve(data.data)
                } else {
                    reject(data.message)
                }
            }).catch(err => reject(err.message))
    })
}

JSX Code i am using:

{
  !currentUser.id ? '' : getBookings(r.id).then(resp => {
  const fb = resp.filter(b => parseInt(b.uid) === parseInt(currentUser.id))
  if (resp.length > 0 && fb.length > 0) {
    return <div className="d-flex justify-content-center align-items-center">
    <div className='contact-d'>
      <a href={`tel:${r.phone}`} className="btn rounded-pill border-0 py-3 mb-2 mb-md-0 mt-2 mt-md-0 calldriver mx-2">call</a>
      <Link to="/chat-booked" className="btn rounded-pill border-0 py-3 mb-2 mb-md-0 calldriver mx-2">Messag</Link>
      <a href="mailto:support@puchkoo.com" className="btn rounded-pill py-3 reportride mx-2">Report Ride</a>
     </div>
    </div>
  } else {
     return ''
  }
}).catch(err => console.log(err))
                                                                }