ScrollView Getting error undefined is not a function, js engine: hermes - reactjs

Question

I Tried to using useRef to automate scroll if I press button
The idea is scroll with my scrollview and then I can press button to scroll to another set of view in my scrollview
this is my complete slider code
import { height } from 'deprecated-react-native-prop-types/DeprecatedImagePropType'
import { onChange } from 'deprecated-react-native-prop-types/DeprecatedTextInputPropTypes'
import React , {useState,useRef} from 'react'
import { StyleSheet, View , Text , ScrollView , Pressable , Image, Dimensions , TouchableOpacity} from 'react-native'
const WIDTH = Dimensions.get('window').width
const HEIGHT = Dimensions.get('window').height
const ImageSlider = ({slides}) => {
const refScrollview = useRef()
const [currentIndex,setCurrentIndex] = useState(0)
// console.log(slides[currentIndex].banner)
const [imageActive,setImageActive] = useState(1)
const onChange = (nativeEvent) =>{
if(nativeEvent){
const slide = Math.ceil(nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width)
if(slide != imageActive){
console.log(slide)
setImageActive(slide)
console.log(refScrollview.current)
}
}
}
return(
<View style={{flex:1}}>
<ScrollView
ref={refScrollview}
// onContentSizeChange={(contentWidth, contentHeight)=> {refScrollview.current.scrollToEnd({animated: true})}}
onScroll={({nativeEvent}) => onChange(nativeEvent)}
showsHorizontalScrollIndicator={false}
pagingEnabled
horizontal
style={styles.wrap}
>
{
slides.map((e,index)=>
// <Text>{e.banner}</Text>
<View style={{flex:1}} key={index}>
<Image source={e.banner}
style={[styles.wrap]}
>
</Image>
<Image source={e.bannerFace}
style={styles.bannerFace}
>
</Image>
</View>
)
}
</ScrollView>
<View style={styles.wrapDot}>
{
slides.map((e,index)=>
<TouchableOpacity key={index} style={imageActive == index ? styles.lineActive : styles.lineOnly} onPress={() => {
refScrollview.current.scrollTo()}}>
</TouchableOpacity>
)
}
</View>
</View>
)
}
let styles = StyleSheet.create({
backgroundImage: {
flex:1,
width: null,
height: null,
// width: 400,
// height: 400,
// resizeMode: 'cover',
},
bannerFace:{
position:'absolute',
bottom:0,
right:0,
flex: 1,
width: 150,
height: 150,
resizeMode: 'contain'
},
wrap:{
width:WIDTH,
height:'100%'
},
wrapDot:{
position:'absolute',
bottom:20,
left:50,
flexDirection:'row',
alignSelf:'center'
},
lineOnly:{
padding:5,
width:70,
borderRadius:15,
borderColor:'#CECECE',
backgroundColor:'#CECECE',
marginHorizontal:5
},
lineActive:{
padding:5,
width:70,
borderRadius:15,
borderColor:'#FFF',
backgroundColor:'#FFF',
marginHorizontal:5
}
})
export default ImageSlider
I get the error TypeError: undefined is not a function, js engine: hermes
whenever i try to push/use this
onPress={() => {
refScrollview.current.scrollTo()}}
It looks like there is no scrollTo() function , am I doing this wrong ? or is it my react node.modules ?