I attempted to add a chartJS line chart to my application and got 'Invalid Hook Call' errors. I figured I might be doing something wrong, so I started a fresh application and attempted to follow a tutorial. After following this VERY basic youtube tutorial for using ChartJS in React, I get a blank page. If I go to inspect->console. I see errors for 'Invalid Hook Call'.

I have checked both versions of react-native and react-dom; versions do not seem to be the issue. This is my output from npm ls for reference.

My ./App.js code - its literally almost a copy of the tutorial . If i remove the <Bar /> from the return at the bottom, application runs fine. :

import './App.css';
import {
  Chart as ChartJS, 
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'
import { Bar } from 'react-chartjs-2'
import React, {useState, useEffect} from 'react'

ChartJS.register(CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend);

function App() {

  const [chartData, setChartData] = useState({
    datasets: [],
  });

  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    setChartData({
      labels: ["Greg", "Chuck", "Kevin", "Sam", "Seth"],
      datasets: [
        {
          label: "Votes", 
          data: [50,1,1,0,1000],
          borderColor: "rgb(53, 162, 235)",
          backgroundColor: "rgba(53, 162, 235, 0.3)",
        },
      ],
    })
    setChartOptions({
      responsive: true,
      plugins: {
        legend: {
          position: "top",
        },
        title: {
          display: true,
          text: "Who does the most work?",
        },
      },
    });
  }, []);

  return (
    <div className="App">
      <h2>BarChart</h2>
      <Bar options={chartOptions} data={chartData} />
    </div>
  );
}

export default App;

Does anyone see something I'm not as to why I could be getting this error?