Victory Native Scatter custom element

Question

Question

I am trying to migrate to the new version of Victory Native v^40.0.4 - we have an existing scatter chart that used <VictoryChart><VictoryAxis /><VictoryScatter /></VictoryChart>. Our Scatter component utilized the dataComponent prop to render a custom element.

In migration to new version, the new Scatter component is limited to props including the shape: type ScatterShape = "circle" | "square" | "star";

This is our old code:

 <VictoryChart
            domain={{
                x: domainX as DomainTuple,
                y: domainY as DomainTuple,
            }}
            domainPadding={{ x: 10, y: yDomainPadding }}
            height={148} // total height 186 - Victory build in parent padding on top & bottom
            padding={{ top: 0, bottom: 8, right: 48, left: onlyNV ? 0 : 48 }}
            width={chartWidth}
        >
            <VictoryAxis
                dependentAxis
                domain={domainY as DomainTuple}
                maxDomain={ticksValues[ticksValues.length - 1]}
                minDomain={ticksValues[0]}
                style={{
                    axis: { stroke: 'transparent' },
                    tickLabels: {
                        fill: theme.colors.khaki[600],
                        fontFamily: 'Inter_700Bold',
                        fontSize: 10,
                    },
                }}
                tickCount={dataWithNV.length}
                tickFormat={y => {
                    return y === nvYear ? 'N.V.' : y;
                }}
                tickValues={ticksValues}
            />
            <VictoryAxis
                domain={domainX as DomainTuple}
                style={{
                    axis: { stroke: 'transparent' },
                    tickLabels: { fill: theme.colors.primary },
                }}
                tickFormat={() => ''}
            />
            <VictoryScatter
                data={dataWithNV}
                dataComponent={
                    <DataComponent currentWine={currentWine?.Vintage} />
                }
            />
        </VictoryChart>

which renders this:

Now, the new code with the new version of VictoryNative looks like:

<CartesianChart
                axisOptions={{
                    font,
                    lineWidth: 0,
                    lineColor: theme.colors.white,
                    tickCount: dataWithNV.length,
                    labelColor: theme.colors.primary,
                    formatXLabel: () => '',
                    formatYLabel: y => {
                        return y === nvYear ? 'N.V.' : y.toString();
                    },
                }}
                data={dataWithNV}
                domain={{ x: domainX, y: domainY }}
                domainPadding={{
                    left: 20,
                    right: 20,
                    top: 10,
                    bottom: 10,
                }}
                xKey="x"
                yKeys={['y']}
            >
                {({ points }) => {
                    return (
                        // pass a PointsArray to the Scatter component
                        <Scatter
                            color="red"
                            points={points.y}
                            radius={10}
                            shape="star"
                            style="fill"
                        >
                            { /* <DataComponent currentWine={currentWine?.Vintage} /> this child component doesn't do anything */ }
                        </Scatter>
                    );
                }}
            </CartesianChart>

This now renders ⭐️ instead of our element.

How would I render a custom element for Scatter with this new version of the library?