Creating a Custom Point Element In Chart JS

I want to override the default pointElement by extending it to my customPointElement but the code is never called for my custom point. I’m not sure how to register it, or if what I’m doing is even correct. It just uses the default draw logic. It never calls the customPointElement

class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        console.log("custom draw")
        super.draw(ctx, area);
        // custom drawing logic here
    }
}

Chart.register({
    id: 'customPointElement',
    element: CustomPointElement,
});

const ctx = document.getElementById('myChart');

// create a new line chart in chartJS
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            pointRadius: 10,
        }]
    },
})