Code returns a TypeError when defining a gradient-colored Bar chart in react-chart-js-2

I have been watching YouTube videos on how to have gradient charts using react-chart-js-2. I followed the steps they provided, but it seems to not work in my case. I encountered errors that they didn't encounter, particularly, a TypeError. I don't exactly know why. Here's my code:

import React from "react";
import { Bar } from "react-chartjs-2";

const SampleBarChart = () => {
    const data = {
        labels: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
        datasets: [
            {
                label: "random",
                data: [1,2,3,4,5,6,7,18,9,10,11,12],
                backgroundColor: "#bdbdbdee",
            },
        ],
    };

    const setGradientColor = (canvas, color) => {
        const ctx = canvas.getContext("2d");
        let gradient = ctx.createLinearGradient(0, 0, 600, 500);
        gradient.addColorStop(0, color);
        gradient.addColorStop(0.95, "red");
        gradient.addColorStop(0.95, "color");
        
        return gradient;
    };

    const getChartData = canvas => {
        const myData = data;
        if (myData.datasets) {
            let colors = ["red"];
            myData.datasets.forEach((set, i) => {
                set.backgroundColor = setGradientColor(canvas, colors[i]);
                set.borderColor = "white";
                set.borderWidth = 2;
            });
        }
        return myData;
    }


    return (
        <div className="bar-graph-info-box">
            <div className="title">{"SAMPLE"}</div>
            <div className="timeframe">FROM JANUARY 1 - DECEMBER 31</div>
            <div className="separator"></div>
            <Bar
                className="bar-chart"
                data={getChartData}
                options={{responsive: true}}
            />
            <div className="separator"></div>
            <div className="footer-msg">
                lorem ipsum {10}% dolor to the
                beginning of the year
            </div>
        </div>
    );
};

export default SampleBarChart;

And this is the error that I get:

TypeError: Cannot read properties of undefined (reading 'map')
setDatasets

D:/2022/sampleProject/src/utils.ts:53
  50 | ) {
  51 |   const addedDatasets: ChartDataset<TType, TData>[] = [];
  52 | 
> 53 |   currentData.datasets = nextDatasets.map(nextDataset => {
  54 |     // given the new set, find it's current match
  55 |     const currentDataset = currentData.datasets.find(
  56 |       dataset => dataset[datasetIdKey] === nextDataset[datasetIdKey]

IMPORTANT: One thing I noticed, however, is that when I pass getChartData as getChartData() for my data in the Bar component, a different error will appear. This time, it's this:

TypeError: Cannot read properties of undefined (reading 'getContext')
setGradientColor
D:/2022/sampleProject/client/src/components/Private/OverviewPage/NetInfo/BarChart/SampleBarChart.js:30
  27 |    };
  28 | 
  29 |    const setGradientColor = (canvas, color) => {
> 30 |        const ctx = canvas.getContext("2d");
     | ^  31 |        let gradient = ctx.createLinearGradient(0, 0, 600, 500);
  32 |        gradient.addColorStop(0, color);
  33 |        gradient.addColorStop(0.95, "red");

FINAL SAY: I have tried to search for answers here and the react-chartjs-2 documentation, but the examples (and some relevant stackoverflow answers) provided were written in typescript, so, I got confused. I hope someone could help me with this. Thank you so much.