Tengo esta línea de código debajo

 <g id="xlabels"> {dataArray.map(({ fullName }, index) => ( <text transform={`translate(${points[index].x + 5} ${ graphHeight + 10 }) rotate(-30.38)`} style={styles["xLabel"]} fill={points[index].color} textAnchor="end" > {fullName} </text> ))} </g>

Quiero agregar un lapso dentro de él. por ejemplo

 <span>{fullName}</span>

La intención de hacerlo es que actualmente el nombre completo se muestre en color rojo porque mencioné fill={points[index].color} pero quiero mostrar el primer carácter en color negro y el resto de los caracteres deben permanecer en rojo como antes.

¿Puede alguien pls decirme cómo hacerlo. Leí que no puedes poner etiquetas div o span dentro de un elemento svg. ¿Alguna otra forma en que pueda solucionar esto o alguna forma alternativa de lograrlo?