New Line (\n) not working for tickFormatter in Y-Axis

[MarkForLoop]

In the code provided at the bottom, I am expecting the "Jan 22" to return as the image

so I assumed that i could just using "\n" would work since it is a string

when i console.log it is returned as this:

but in the UI it is being outputted as this

Am I using tickFormatter wrong? if so what would be the correct way to get the new line

        <XAxis
          dataKey="date"
          axisLine={false}
          tickLine={false}
          fontSize={10}
          fontFamily="Nunito sans"
          fontWeight={400}
          tickFormatter={(value: string) => {
            // example value: "Jan 21" I want the output to be "Jan\n21" and return as a string
            return value.replace(" ", "\n");
          }}
        />