remove axes on graph created with react-chartjs-2 axes

Question

I am learning react-chartjs-2 and I am recreating some of its examples. May I know why I get these grey axes with the following code? An image of the problem is linked on top. It shows the problem I am facing.

import { Line } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Legend
} from "chart.js"

function Upperright() {
  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Legend
  )

  const data = {
    labels: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    datasets: [
      {
        label: "Item1",
        data: [400, 300, 350, 200, 280],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      }, 
      {
        label: "Item2",
        data: [300, 400, 350, 100, 220],
        borderColor: 'rgb(53, 162, 235)',
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
      }
    ]
  }
  return (
    <Line
      data={data}
      options={{
        responsive: true,
        plugins: {
          legend: {
            display: true,
            labels: {
              color: 'white'
            },
          }
        },
        scales: {
            yAxes:{
                grid: {
                    color: '#FFFFFF',
                },
                ticks:{
                    color: 'white',
                    fontSize: 12,
                }
            },
            xAxes: {
                grid: {
                    color: '#FFFFFF',
                },
                ticks:{
                    color: 'white',
                    fontSize: 12,
                }
            },
        },
      }}
    />
  )
}

export default Upperright;

Any help on this would be great! It would be nice if the answer could also explain a little bit about the reason.