React native ScrollView resets positon on setState

I have a ScrollView with buttons on it. I populate ScrollView dynamicaly. After I press on the buttons inside the ScrollView, I'm changing the state of the current selected index and the posiotion of ScrollView is resetting.

<ScrollView  ref={ref => {    this._scrollview = ref;  }}  style={styles.scrollview}  horizontal  showsHorizontalScrollIndicator={false}  snapToInterval={64}  snapToAlignment="start"  decelerationRate="fast"  contentContainerStyle={{ paddingRight: 8, paddingLeft: 8 }}>    {this._channels.map((item, index) =><TouchableWithoutFeedback        onLayout={event => {          const layout = event.nativeEvent.layout;          this._channelsPositions[index] = layout.x;        }}        key={item.userId}        onPress={() => this._changeIndex(index)}><Image          source={{ uri: videos[index][0].channelThumbnails.high.url }}          style={[styles.channelLogo, index == this.state.currentIndex ? { borderWidth: 2 } : {}]}        /></TouchableWithoutFeedback>    )}</ScrollView>_changeIndex = (newIndex: number) => {  const { currentIndex } = this.state;  if (newIndex == currentIndex) return;  this.setState({    currentIndex: newIndex  });  const newX = 16 + 48 * newIndex  this._scrollview.scrollTo({    x: 16 + 48 * newIndex,    y: 0,    animated: true  })}

And after I press the button I want ScrollView to move to x position of this button inside the ScrollView.Demo: https://streamable.com/gu1edy