Cleaning up react-chartjs-2 chart points when making updates - reactjs

Question

I would like to create a chart from react-chartjs-2 that only renders the first and last points. You'll notice I have that implemented inside pointRadius. For a simple static chart that renders once this actually works fine.
The problem is I have another component that will update someDynamicData which causes the line chart to be updated and when it gets updated the previously drawn points are still visible.
Is there a way to cleanup each chart so when I dynamically update it I always get just the first and last points drawn for the current chart im looking at?
I have tried hooking up a ref and manually calling update and delete which both do not seem to work.
function getData (someData) {
return {
labels: someData.map(d => d.point),
datasets: [
{
data: someData.map(d => d.point),
fill: false,
borderColor: 'white',
tension: 0.5
},
],
};
}
function getOptions (someData) {
return {
elements: {
point: {
radius: 0,
pointRadius: function (context) {
if (context.dataIndex === 0 || context.dataIndex === someData.length - 1) {
return 10;
}
},
},
tooltips: {
enabled: false
},
},
plugins: {
legend: {
display: false
}
}
};
}
const LineChart = ({someDynamicData}) => ( <Line data={getData(someDynamicData)} options={getOptions(someDynamicData)} />);
export default LineChart;