When animating and changing state, the animation disappears(react native)

I am using react native with expo cli and I have a component:

import React, {useEffect, useState} from 'react'
import {View, TextInput, Text, TouchableOpacity, Animated, Easing} from 'react-native';
import s from './Login_style'
import {connect} from "react-redux";

const LoginInner = (props) => {

  const [mode, setMode] = useState(true)
  const btnAnim = new Animated.Value(0)

  const setModeAnim = (is) => {
    if (is) {
      Animated.timing(btnAnim, {
        toValue: 1,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false,
      }).start()
      // setMode(false)
    } else {
      Animated.timing(btnAnim, {
        toValue: 0,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

  const size1 = btnAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['30%', '60%']
  })
  const size2 = btnAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['60%', '30%']
  })

  return (
    <View style={s.page}>
      <View style={s.inputs}>
        <Text style={[s.text, s.title]}>{mode ? 'Вход' : 'Регистрация'}</Text>
        <View style={s.textInput}>
          <View>
            <Text style={[s.text, s.placeholder]}>Логин</Text>
          </View>
          <TextInput style={s.input}/>
        </View>
        <View style={s.textInput}>
          <View>
            <Text style={[s.text, s.placeholder]}>Пароль</Text>
          </View>
          <TextInput style={s.input}/>
        </View>
        <View style={s.actions}>

          <Animated.View style={[s.btn, s.loginBtn, {width: size2}]}>
            <TouchableOpacity style={s.touchableBtn} onPress={() => {
              setModeAnim(false)
            }}>
              <Text style={s.loginBtn_text}>{mode ? 'Вход' : '<--'}</Text>
            </TouchableOpacity>
          </Animated.View>


          <Animated.View style={[s.btn, s.regBtn, {width: size1}]}>
            <TouchableOpacity style={s.touchableBtn} onPress={() => {
              setModeAnim(true)
            }}>
              <Text style={s.loginBtn_text}>{mode ? '-->' : 'Регистрация'}</Text>
            </TouchableOpacity>
          </Animated.View>

        </View>
      </View>
    </View>
  )
}

const Login = connect((state) => {
  return {}
}, {})(LoginInner)

export default Login

Here I am interested in this function

const setModeAnim = (is) => {
    if (is) {
      Animated.timing(btnAnim, {
        toValue: 1,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false,
      }).start()
      // setMode(false)
    } else {
      Animated.timing(btnAnim, {
        toValue: 0,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

I run the animation here when the function is executed (ignore the commented out line for now). The animation really works. VIDEO DEMONSTRATION: https://youtu.be/fiGy0gNej68

But if I change the state of the component in this function after starting the animation: setMode(false) or setMode(true) animation does not start, even the buttons do not change their size VIDEO DEMONSTRATION: https://youtu.be/deLZEKVnaBY

Tell me how to solve this Thanks

Please do const btnAnim = React.useRef(new Animated.Value(0)).current – Harrison