React Native Expo - Reset Scrollview to Top of ScrollView After Render

I'm have a large scrollview which contains various images and text items. Currently when I click on a map marker in my mapview, the scrollview below displays the currently selected marker. The problem is, when this changes the scrollview still remains scrolled down to the bottom, meaning users can can lost. I would like to reset the scrollview to the top each time the data is re-rendered to show another map marker's information.

Here is how I attempted this based of other examples:

function Map() {

......
// Creating Ref for ScrollView
   const scrollViewRef = React.createRef();

   const pressMarker = (i) => {
      setCurrentMarker(i);
      console.log(CurrentMarker) // Log the current data of marker displayed
      this._map.animateToRegion({
         latitude: i.Latitude,
         longitude: i.Longitude,
         latitudeDelta: 0.0015,
         longitudeDelta: 0.0015,
       });
    // Below: trying to trigger scrollview to return to top when marker is pressed.
       scrollViewRef?.current?.useScrollToTop;
    // I have tried this method also with no succes:
       scrollViewRef.current?.scrollTo(0, 0, true);

      return(CurrentMarker)
    };
.....
<MapView
        initialRegion={{ latitude: ******, longitude: ********, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
        style={{ flex: 1, minHeight: windowHeight }}
        provider={PROVIDER_GOOGLE}
        customMapStyle={mapStyle}
        showsUserLocation={true}
        ref={(map) => (this._map = map)}
      >
        {users.map((i, index) => (
          <Marker key={index} onPress = {() => pressMarker(i)}
            coordinate={{ latitude: i.Latitude, longitude: i.Longitude }}
            title={i.Title} 
          />
        ))}
      </MapView>

      <View style={styles.expandingView}>
         <TouchableOpacity style={styles.touchableButton } onPress={toggleCollapsed}>
            <Text style={styles.markerTitle}>{CurrentMarker.PreviewTitle}</Text>
            <Image source={require("../assets/upArrowWhite.png")} style={styles.arrowLogo}></Image>
         </TouchableOpacity>
         <Animated.View style={{maxHeight: animationHeight}}>
            <ScrollView style={styles.scrollviewContainer}
               ref={scrollViewRef} // Assigning Scrollview Ref
            >
               <View style={{bottom: 0, flex: 1, paddingBottom: 900, height: '100%'}}>
                  <View style={styles.ImageContainer}>
                     <Image style={styles.markerImage} source={{ url: CurrentMarker.ImageUrl }}/>
                     <Text style={styles.imageComment}>{CurrentMarker.ImageComment}</Text>
                  </View>
                  <View>
                     <Text style={styles.markerTitleScrollview}>{CurrentMarker.Title}</Text>

                  </View>
               </View>
            </ScrollView>
         </Animated.View>
      </View>
.......

However this method does not seem to be effective. I thought this would be relatively easy, as I don't need to add any event listeners or anything, I just simply want to trigger the scrollview to return back to the top when the marker is pressed, a function which is already working effectively beforehand.