SVG not updating react-native-svg

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