React XAxis tick label formatted with line break

I need create a chart like this on fiddle:

    const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ScatterChart, Scatter} = Recharts;const data = [      {name: 0, uv: 4000,  amt: 2400},      {name: 1, uv: 3000, amt: 2210},      {name: 2, uv: 2000, amt: 2290},      {name: 3, uv: 2780,  amt: 2000},      {name: 4, uv: 1890,  amt: 2181},];const data2 = [      {name: 0,  pv: 2400, amt: 2400},      {name: 1, pv: 3200, amt: 2210},      {name: 2,  pv: 9800, amt: 2290},      {name: 3, pv: 3908, amt: 2000},];const label = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];function tickLabelFormater(hour: number) {  var today = new Date();  var dd = String(today.getDate()).padStart(2, '0');  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!  var yyyy = today.getFullYear();  today = mm +'/'+ dd +'/'+ yyyy;  hh = Math.floor(Math.abs(hour));  mm = Math.floor((Math.abs(hour) * 60) % 60);  return [`${today}`, `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`];  //return `today ${'\n'} ${sign}${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;}const SimpleLineChart = React.createClass({    render () {    return (<ScatterChart width={600} height={300}             margin={{top: 5, right: 30, left: 20, bottom: 5}}><XAxis dataKey={"name"} domain={[0,4]} tickFormatter={tickLabelFormater} /><YAxis/><CartesianGrid strokeDasharray="3 3"/><Tooltip/><Legend /><Scatter data={data} line shape={() => null}  dataKey="uv" fill="#8884d8" activeDot={{r: 8}}/><Scatter data = {data2} line shape={() => null}  dataKey="pv" fill="#82ca9d" /></ScatterChart>    );  }})

https://jsfiddle.net/0zdnjuhc/2/:

Image

However on the tickLabelFormater I need a line break between the 'today' information and the formatter value. So the label would look like:

04/19/2022
02:00

I've already tried returning an array of strings and return a string with '\n', but without success.

Can anyone please help?