SVG not updating react-native-svg - react-native

Question

I have a text input and depending on the text in it will change the xml of <SvgXml />
import React, { useState } from 'react';
import { TextInput, View } from 'react-native';
import { phone } from 'phone'
import { SvgXml } from 'react-native-svg';
import styles from '../styles/home';
function Home() {
const [flagImage, setFlagImage] = useState(null)
const [phoneNumber, setPhoneNumber] = useState(null)
async function handlePhoneNumberChange({ nativeEvent }) {
setPhoneNumber(nativeEvent.text)
const phoneResult = phone(nativeEvent.text)
if (phoneResult.isValid) {
const country = await getCountryData(phoneResult.countryIso2);
if (country.xml) setFlagImage(country.xml);
}
}
return (
<View style={styles.phone} >
{flagImage &&
<View style={styles.phoneFlag} >
{console.log(flagImage)}
<SvgXml xml={flagImage} height={30} width={30} />
</View>
}
<TextInput
value={phoneNumber}
onChange={handlePhoneNumberChange}
keyboardType="numeric"
style={styles.phoneInput}
ref={phoneInputRef}
/>
</View>
);
};
export default Home;
But when the setFlagImage is called the image is not updated, but the log is correct.
If I copy and paste the SVG log into the initial useState the correct SVG is displayed