VictoryScatter chart doesn't render dataComponent inside of chart area in React Native

Question

I am trying to build a chart (day x hour of the day) and show an image at every "point" using victory-chart component. I played a lot on the website with the following component https://formidable.com/open-source/victory/gallery/brush-zoom/ and got it to what I want with the code below, replacing only the tags with the React Native and with View. But when I try to use it into my React Native app, the "cats" are not being printed within the chart area, as can be seen on the image below. Am I doing something wrong?

class CatPoint extends React.Component { 
 render() {
  const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
  const cat = datum._y >= 0 ? "😻" : "😹";
  return (
    <text x={x} y={y} fontSize={30}>
     {cat}
    </text>
);
}
}

class App extends React.Component {

constructor() {
  super();
  this.state = {
    zoomDomain: { 
      y: [new Date(1982, 1, 1), new Date(1982, 1, 8)],
      x: [6, 15]
    }
  };
}

handleZoom(domain) {
  this.setState({ zoomDomain: domain });
}

render() {
  return (
    <div>
      <VictoryChart 
          responsive={true}
          width={470} 
          height={600} 
          containerComponent={
            <VictoryZoomContainer
              zoomDimension="y"
              zoomDomain={this.state.zoomDomain}
              onZoomDomainChange={this.handleZoom.bind(this)}
            />
      }
    >
        <VictoryAxis dependentAxis crossAxis
            orientation="left"
            scale={{ y: "time" }}
        />
        <VictoryAxis crossAxis
          orientation="top"
          domain={{ x: [0, 24] }}
                style={{ tickLabels: { angle: -60 } }}
                tickFormat={[
                    "0AM",
                    "1AM",
                    "2AM",
                    "3AM",
                    "4AM",
                    "5AM",
                    "6AM",
                    "7AM",
                    "8AM",
                    "9AM",
                    "10AM",
                    "11AM",
                    "12AM",
                    "1PM",
                    "2PM",
                    "3PM",
                    "4PM",
                    "5PM",
                    "6PM",
                    "7PM",
                    "8PM",
                    "9PM",
                    "10PM",
                    "11PM"
                  ]}
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.10, b: new Date(1982, 1, 1) },
            { a: 10.50, b: new Date(1982, 1, 1) },
            { a: 12.45, b: new Date(1982, 1, 1) },
            { a: 15.30, b: new Date(1982, 1, 1) },
            { a: 17.22, b: new Date(1982, 1, 1) },
            { a: 19.12, b: new Date(1982, 1, 1) }
          ]}
          x="a"
          y="b"
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.30, b: new Date(1982, 1, 1) },
            { a: 11.50, b: new Date(1982, 1, 1) },
            { a: 13.45, b: new Date(1982, 1, 1) },
            { a: 16.30, b: new Date(1982, 1, 1) },
            { a: 17.32, b: new Date(1982, 1, 1) },
            { a: 18.12, b: new Date(1982, 1, 1) }
          ]}
          x="a"
          y="b"
        />
        <VictoryScatter
          style={{
            data: { stroke: "tomato" }
          }}
          dataComponent={<CatPoint/>}
          data={[
            { a: 8.10, b: new Date(1982, 1, 4) },
            { a: 10.50, b: new Date(1982, 1, 4) },
            { a: 12.45, b: new Date(1982, 1, 4) },
            { a: 15.30, b: new Date(1982, 1, 4) },
            { a: 17.22, b: new Date(1982, 1, 4) },
            { a: 19.12, b: new Date(1982, 1, 4) }
          ]}
          x="a"
          y="b"
        />

      </VictoryChart>

  </div>

Answer 1

I figured out what was the problem. In the CatPoint component, I was using the tag from React Native, and since I was inside of a "svg" component, I should have used the Text tag from it, like the example on the line below. :)

import { Text } from "react-native-svg";