Creating an AnimatedTextInput causes the keyboard to close immediately

Question

I'm having trouble getting an AnimatedTextInput to work properly where a normal TextInput works properly. When I press the TextInput to start typing, there are no problems, and I can start typing immediately. However, on an AnimatedTextInput, the software keyboard closes immediately.

So, this works just fine:

  return (
    <View>
      <TextInput style={[style, styles.input, { paddingTop: 20, paddingBottom: 20 }]} {...restOfProps} onFocus={() => handleFocus()} onBlur={handleBlur} ref={refInput} />
      <Animated.View style={[styles.labelContainer, { opacity: opacity}]}>
        <Text style={styles.label}>{label}</Text>
      </Animated.View>
    </View>
  )

However this:

  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)

  return (
    <View>
      <AnimatedTextInput style={[style, styles.input, { paddingTop: paddingTop, paddingBottom: paddingBottom }]} {...restOfProps} onFocus={() => handleFocus()} onBlur={handleBlur} ref={refInput} />
      <Animated.View style={[styles.labelContainer, { opacity: opacity}]}>
        <Text style={styles.label}>{label}</Text>
      </Animated.View>
    </View>
  )

Immediately causes the software keyboard to quickly open then close when touching the input to gain focus/to start typing. On searching, answers I've seen say this is related to being part of a scrollview, but this happens whether in a scrollview or not.

For reference, here's the entire file:

import React, { useRef } from 'react';
import { Animated, StyleSheet, Text, TextInput, View } from 'react-native';

const styles = StyleSheet.create({
  input: {
    padding: 24,
    borderColor: 'transparent',
    borderWidth: 1,
    borderRadius: 4,
    fontFamily: 'Avenir-Medium',
    fontSize: 16,
    backgroundColor: '#F8F8F8',
  },
  labelContainer: {
    position: 'absolute',
    left: 16,
    top: 9,
    paddingHorizontal: 8,
  },
  label: {
    color: '#ABB4BD',
    fontFamily: 'Avenir-Heavy',
    fontSize: 12,
  },
})

// extend from native TextInput props
const TextField = (props) => {
  const { label, style, ...restOfProps } = props;
  const [isFocused, setIsFocused] = React.useState(false);
  const opacity = useRef(new Animated.Value(0)).current;
  const paddingTop = useRef(new Animated.Value(20)).current;
  const paddingBottom = useRef(new Animated.Value(20)).current;

  const refInput = useRef();

  React.useEffect(() => {
    Animated.timing(
      paddingBottom,
      {
        useNativeDriver: false,
        toValue: isFocused ? 10 : 20,
        duration: 200,
      }
    ).start();
    Animated.timing(
      paddingTop,
      {
        useNativeDriver: false,
        toValue: isFocused ? 30 : 20,
        duration: 200,
      }
    ).start();
    Animated.timing(
      opacity,
      {
        useNativeDriver: false,
        toValue: isFocused ? 1 : 0,
        duration: 200,
      }
    ).start();
  }, [isFocused])

  const handleFocus = (input) => {
    console.log('here')
    setIsFocused(true);
  }
  const handleBlur = () => {
    console.log('there')
    setIsFocused(false);
  }

  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)

  return (
    <View>
      <AnimatedTextInput style={[style, styles.input, { paddingTop: paddingTop, paddingBottom: paddingBottom }]} {...restOfProps} onFocus={() => handleFocus()} onBlur={handleBlur} ref={refInput} />
      <Animated.View style={[styles.labelContainer, { opacity: opacity}]}>
        <Text style={styles.label}>{label}</Text>
      </Animated.View>
    </View>
  )
};
export default TextField;