title: returned values cannot be accessed outside react map
body: <p>I'm mapping an array to create a array with the structure of my liking. I've done it as follows</p>
  
  <pre><code>    let bookingsArr = [];
      providers.map((item,key)=&gt;{
          item.bookings.map((booking,key)=&gt;{
              bookingsArr.push({"title":item.title,"seeker":booking.seekerId,"status":booking.status,"imageUrl":item.imageUrl});
              console.log("this gets printed",bookingsArr);
          })
      })
  
      console.log("this does not get printed",bookingsArr);
  </code></pre>
  
  <p>Here i have console logged the <code>bookingsArr</code> but for some reason it will not get printed in my terminal. The code doesn't run after the map. But if i console log <code>bookingArr</code> inside the map function i can see the console log in my terminal. I need to use <code>bookingArr</code> outside the map function. What's causing the issue here?</p>
  
  <p>Full function</p>
  
  <pre><code>export const loadBookings = async () =&gt; {
      const providersSnapshot = await firebase.database().ref('Clothvalues').once('value');
      const providers = providersSnapshot &amp;&amp; providersSnapshot.val();
  
      if (!providers) {
          return undefined;
      }
      let bookingsArr = [];
      providers.map((item,key)=&gt;{
          item.bookings.map((booking,key)=&gt;{
              bookingsArr.push({"title":item.title,"seeker":booking.seekerId,"status":booking.status,"imageUrl":item.imageUrl});
              console.log("this gets printed",bookingArr);
          })
      })
      console.log("this does not get printed",bookingArr);
  
      return bookingsArr;
  };
  </code></pre>
  
  <p>So basically i want <code>loadBookings</code> function to return my array.</p>