"Type ... is not assignable to type ..." when using ReactJS with ChartJS?

Question

I run a demo(draw a chart using ChartJS) when learn ReactJS in Javascript. But I really confused when I pass userData to <Bar data={userData}/> it tells me this is an error, I will appreciate it if you can help me.

This is the error in App.js, I don't know why this happens.

Source coude:

App.js

import { useState } from "react";
import { UserData } from "./Data";
import { Bar } from "react-chartjs-2";

function App() {
    const [userData, setUserData] = useState({
        labels: UserData.map((data) => data.year),
        datasets: [
            {
                label: "Users Gained",
                data: UserData.map((data) => data.userGain),
                backgroundColor: [
                    "rgba(75,192,192,1)",
                    "#ecf0f1",
                    "#50AF95",
                    "#f3ba2f",
                    "#2a71d0",
                ],
                borderColor: "black",
                borderWidth: 2,
            },
        ],
    });

    return (
        <div style={{ width: 700 }}>
            <Bar data={userData} />
        </div>
    );
}

export default App;

Data.js

export const UserData = [
    {
        id: 1,
        year: 2016,
        userGain: 80000,
        userLost: 823,
    },
    {
        id: 2,
        year: 2017,
        userGain: 45677,
        userLost: 345,
    },
    {
        id: 3,
        year: 2018,
        userGain: 78888,
        userLost: 555,
    },
];

part of my package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "chart.js": "^3.9.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
  }