how to loop MapView component API and get a multiple mapRef in Array map method- react native

Question

[enter image description here][1]I am developing Live tracking App for Android and IOS using google maps APIs and the technology i am using is React native. I am able to list the multiple maps using an array map method but not all the map routes are coming within the frame only the last map is fitting in the frame view, because mapRef is getting overwritten. How do I update mapRef instead of overwritting.

const mapRef = useRef();
useEffect(() => {
  screen();
}, [dataSource]);

const screen = () => {
trips = dataSource.map((val, key) =>  {
 let origin = val.route_origin;
    let ori = " "+origin;
    let destination = val.route_destination;
    let dest = " "+destination;
    let newDate = val.trip_date;
    {console.log("newdate:",newDate)}
    var trip_date = moment(newDate).format('DD/MM/YYYY');
    let trip_time = val.trip_time;
           <MapView
                style={styles.maps}
                initialRegion={{
                  latitude: 13.3379,
                  longitude: 77.1173,
                  latitudeDelta: 0.0922,
                  longitudeDelta: 0.0421,
                }}
                ref={mapRef}  // **mapRef is the issue here,it is getting overwritten so fitTocoordinates is updating only for the last mapView**
                zoomEnabled={true}
              >
                 <MapView.Marker
                  pinColor={"green"}
                  coordinate={{
                    latitude: 12.9716,
                    longitude:77.5946,
                  }}
                ></MapView.Marker>

               <MapViewDirections
                  origin={ori}
                  destination={dest}
                  apikey={"*******************************"} // insert your API Key here
                  strokeWidth={3}
                  strokeColor="hotpink"  
                  optimizeWaypoints={true}
                  onReady={(result) => {

                    mapRef.current.fitToCoordinates(result.coordinates, {
                      mapPadding: {
                        right: Dimensions.get("window").width / 40,
                        bottom: Dimensions.get("window").height / 70,
                        left: Dimensions.get("window").width / 40,
                        top: Dimensions.get("window").height / 70,
                      },
                    });
                  }}
                />
              </MapView>
})}
 console.log("tripsarr",trips);
  settrip1(trips);```


[1]: https://i.stack.imgur.com/5TWr3.png