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></>    );}