Cannot read property 'scrollTo' of null problem in React Native

Question

I am creating a map screen with markers and animated bottom cards. Now what I am trying to do is, when I click on a marker point,I want to open the cards list and show the relevant card at the center. With my code, on my first click I got this error "Cannot read property 'scrollTo' of null," but when I dismiss it on emulator, It start perfectly. Just on first tap I am getting this error. Please Help me. error screen on first marker click this is: after I dismiss the error

//Here is my onpress function

 const _scrollView = React.useRef(null);

const onMarkerPress = (e) => {
    const markerID = e._targetInst.return.key;

    let x = (markerID * CARD_WIDTH) + (markerID * 20)-30; 
console.log(x)
    _scrollView.current.scrollTo({x: x, y: 0, animated: true});
  }

// Markers render code
{ChargingPoints.map((marker, index) => (
          <Marker

            onPress={(e)=> {setCardVisible(true)
              onMarkerPress(e)
            }}
            onDeselect={()=> setCardVisible(false)}
            resize
            key={index}
            coordinate={{
              latitude: marker.coordinate.latitude,
              longitude: marker.coordinate.longitude,
            }}
            title={marker.name}
          >
            <Image
              source={charging_station_icon}
              style={{ width: 35, height: 35 }}
            />
          </Marker>
        ))}

 //CARD RENDER CODE
 
 {isCardVisible? <Animated.ScrollView 
      ref={_scrollView}
        scrollEnabled
        horizontal
        scrollEventThrottle={1}
        showsHorizontalScrollIndicator={false}
        style={styles.scrollView}
        pagingEnabled
        snapToInterval={CARD_WIDTH + 20}
        snapToAlignment="center"
        contentInset={{
          top: 0,
          left:SPACING_FOR_CARD_INSET,
          bottom: 0,
          right: SPACING_FOR_CARD_INSET,
        }}
       
        onScroll={Animated.event(
          [
            {
              nativeEvent: {
                contentOffset: {
                  x: mapAnimation,
                },
              },
            },
          ],
          { useNativeDriver: true }
        )}
      >
        {ChargingPoints.map((marker, index) => (
          <View style={styles.card} key={index}>
            <View style={styles.textContent}>
              <Text numberOfLines={1} style={styles.cardtitle}>
                {marker.name}
              </Text>
              <Text numberOfLines={1} style={styles.cardDescription}>
                Total number of Charging Points: {marker.TotalChargingPoints}
              </Text>
              <Text numberOfLines={1} style={styles.cardDescription}>
                Number of available Charging Points:
                {marker.AvailableChargingPoints}
              </Text>
              <Text numberOfLines={1} style={styles.cardDescription}>
                Density:
                {(
                  marker.UnavaialbleChargingPoints / marker.TotalChargingPoints
                ).toPrecision(2) * 100}
                %
              </Text>
            </View>
          </View>
        ))}
      </Animated.ScrollView>:<></> }