I have this below line of code

<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>

I want to add a span inside it. for e.g.

<span>{fullName}</span>

The intention of doing so is that currently the fullName gets displayed as red color because i mentioned fill={points[index].color} but i want to display the first character as black color and rest characters should remain red as earlier.

Can someone pls let me know how to do it. I read that you cannot put div or span tags inside a svg element. Any other way i can fix this or any alternate way to achieve this ?