React Native label animation with onFocus event - react-native

Question

Hello I am trying to create a phone number with 'react-native-phone-number-input'. But the problem is I have label animation which triggers with onFocus or this kind of things. But phone number input doesnt't have onFocus prop.
And now I have no idea how can I handle with it?
Thanks in advance
Here is my phoneNumber component
const TestComponent = () => {
const [value, setValue] = useState('')
const [formattedValue, setFormattedValue] = useState('')
const [valid, setValid] = useState(false)
const [showMessage, setShowMessage] = useState(false)
const phoneInput = useRef<PhoneInput>(null)
const [isFocused, setIsFocused] = useState(true)
const focusAnimation = useRef(new Animated.Value(0)).current
const scale = focusAnimation.interpolate({
inputRange: [0, 1],
outputRange: [1, 0.75],
})
const translateY = focusAnimation.interpolate({
inputRange: [0, 1],
outputRange: [20, 0],
})
const translateX = focusAnimation.interpolate({
inputRange: [0, 1],
outputRange: [8, -150],
})
let borderColor = isFocused ? colors.primary : colors.gray600
let labelColor = isFocused || value ? colors.primary : colors.gray400
return (
<View>
{showMessage && (
<View>
<Text>Value : {value}</Text>
<Text>Formatted Value : {formattedValue}</Text>
<Text>Valid : {valid ? 'true' : 'false'}</Text>
</View>
)}
<>
<PhoneInput
ref={phoneInput}
defaultValue={value}
defaultCode='TR'
layout='first'
onChangeText={text => {
setValue(text)
}}
onChangeFormattedText={text => {
setFormattedValue(text)
}}
placeholder='Telefon Numarası'
containerStyle={styles.containerStyle}
textContainerStyle={styles.textContainerStyle}
textInputStyle={styles.textInputStyle}
codeTextStyle={styles.codeTextStyle}
flagButtonStyle={styles.flagButtonStyle}
countryPickerButtonStyle={styles.countryPickerButtonStyle}
/>
</>
</View>
)
}
here what I got with it
here what I want to create