Display a string variable on SVG in React-Native

I am trying to display the user's initials (so basically text) on (or inside) an avatar (SVG). I found many topics on this but none of the syntax that I tried worked for me. I am also using TypeScript here.

import React from 'react';
import { View, TextInput, Text } from 'react-native';
import { Svg, Text as SvgText } from "react-native-svg"
import LogoAvatar from '../svg/avatar';

export default function FieldInput() {
    const [firstName, setFirstName] = React.useState('');
    const [lastName, setLastName] = React.useState('');
    const initials = (firstName[0] || "") + (lastName[0] || "")

    return (
        <>
            <View>
                <TextInput
                    onChangeText={setFirstName}
                    value={firstName}
                    placeholder="First Name"
                />
                <TextInput
                    onChangeText={setLastName}
                    value={lastName}
                    placeholder="Last Name"
                />
            </View>
            <Text>{initials}</Text> {/* This displays, but nothing below does */}

            <View>
                <Svg>
                    <SvgText>text</SvgText>
                    <Text>text</Text>
                    <LogoAvatar text={initials}>
                        <text textAnchor="middle">Hello</text>
                        <SvgText>text</SvgText>
                        <Text>text</Text>
                    </LogoAvatar>
                </Svg>
            </View>
        </>
    );
}