React will only render a vertical line no matter how i change the data within the X & Y Axis

Question

I'm following along to a Robinhood Clone tutorial on Youtube. On their version they we're able to change the direction of the line. Mine doesn't seem to budge whenever I change any of the data points. If you've had the same or similar issue, please reach out thanks.

Here is my code:

import React from "react";
import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  CategoryScale,
} from "chart.js";
import { Line } from "react-chartjs-2";

Chart.register(
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  CategoryScale
);

export default function LineGraph() {
  const data = [
    {
      x: 10,
      y: 20,
    },
    {
      x: 15,
      y: 10,
    },
    {
      x: 12,
      y: 4,
    },
  ];
  return (
    <div className="linegraph">
      <Line
        data={{
          datasets: [
            {
              type: "line",
              data: data,
              backgroundColor: "black",
              borderColor: "#5AC53B",
              borderWidth: 2,
              pointBorderColor: "rgba(0, 0, 0, 0)",
              pointBackgroundColor: "rgba(0, 0, 0, 0)",
              pointHoverBackgroundColor: "#5AC53B",
              pointHoverBorderColor: "#000000",
              pointHoverBorderWidth: 4,
              pointHoverRadius: 6,
            },
          ],
        }}
        options={{
          scales: {
            y: {
              ticks: {
                display: false,
              },
              tooltips: {
                mode: "index",
                intersect: false,
              },
            },
          },
        }}
      />
    </div>
  );
}

And the output:

My Code

Along with the Youtube Example:

Cleverprogrammer Example

I've tried manipulating the datasets to reflect different chart direction but no luck.