React Native Animation re runs after state change

Question

How to stop react animation from reanimating after the state has changed? I have a textInput inside an Animated.View, upon OnChangeText, the animation reruns.

This is the code for the animated view, it rolls down a view from the top of the screen and on state change moves it down to the screen.

The textInput is inside this animated view, however when I type something the animation runs again!!

I have tried removing pageLevel dependency from the UseEffect did not help, I think the app reruns every state once one of them change, which makes it reanimating the whole page, in that case, how can I solve this issue?

Animated view code:

//ROLL IN ROLL OUT
const RollUpDownView = (props:any) => {

    //COMING IN
    if (pageLevel == props.index){
        if(pageLevel < previousPageLevel){
            var from = 1000
            var to = 0
        }
        if(pageLevel > previousPageLevel){
            var from = -1000
            var to = 0
        }
    }

    //GOING OUT
    if(props.index != pageLevel ){
        if(pageLevel > previousPageLevel){
            var from = 0
            var to = 1000
        }
        if(pageLevel < previousPageLevel){
            var from = 0
            var to = -1000 
        }
    }

    const rollAnim = useRef(new Animated.Value(from)).current  // Initial value

    React.useEffect(() => {
        Animated.timing(
            rollAnim,
            {
                toValue: to,
                duration: 1000,
                useNativeDriver:false,
            }
        ).start();
    }, [pageLevel])
    

    return (
        <Animated.View                 
            style={{
            ...props.style,
                top: rollAnim,         
            }}
        >
            {props.children}
        </Animated.View>
    );
}

and the textInput is inside:

                            <RollUpDownView index={1}>
                                <TextInput  
                                    styles={styles.textInputStyle}
                                    text='Full Name' 
                                    placeholder='Type your full name here...' 
                                    inputText={fullNameInput} 
                                    onChangeText={setFullNameInput} 
                                />      
                            </RollUpDownView>