replace this. props with setState

I have a class component that looks like this:

interface MyProps {  color: string  deg: any  x: number[]  y: number[]}interface MyState {  hoverMode: any  x: number[]  y: number[]}class Initial extends React.Component<MyProps, MyState> {  chartRef: any  model: any  chart: any  constructor(props: MyProps) {    super(props)    this.model = new PolynomialRegression()    this.chartRef = React.createRef()  }  componentDidMount() {    this.plot()  }  componentDidUpdate() {    this.fit()    this.plot_update()  }  fit() {    // if there is no data: reset the model; else: train the model    if (this.props.x.length === 0 && this.props.y.length === 0)      this.model = new PolynomialRegression()    else this.model.train(this.props.x, this.props.y, this.props.deg)  }  plot_update() {    let data = [],      regression_points = []    for (let i = 0; i < this.props.x.length; i++) {      data.push({x: this.props.x[i], y: this.props.y[i]})    }    for (let i = 0; i < 1; i += 0.05) {      regression_points.push({x: i, y: this.model.predict(i)})    }    this.chart.data.datasets[0].data = data    this.chart.data.datasets[0].label = `Polynomial Degree: ${String(      this.props.deg,    )}`    this.chart.data.datasets[0].pointBackgroundColor.push(this.props.color)    this.chart.data.datasets[1] = {      type: 'line',      label: this.model.expression,      function: function (x: any) {        return this.model.predict(x)      },      data: regression_points,      borderColor: 'rgba(0,0,255,1)',      fill: false,    }    this.chart.update()  }  plot() {    this.chart = new Chart(this.chartRef.current, {      type: 'scatter',      data: {        datasets: [          {            label: `Polynomial Degree: ${String(this.props.deg)}`,            data: [],            fill: false,            pointBackgroundColor: [],          },        ],      },    })  }  render() {    return (<div className="w-100 d-flex justify-content-center"><div className="h-auto" style={{width: 800}}><canvas ref={this.chartRef} /></div></div>    )  }}export default Initial

I am trying to change it to a functional component by using react hooks for useState and useRef. However, I am unable to figure out how to convert functions like plot_update since there I am setting values for objects within objects? I tried to put the code in a useEffect. But then, I am not sure how to replace this.chart.data.datasets[0].label with setStates since initially, I just used the any type while defining it?

Similarly, in the inital code, I have this:

this.model = new PolynomialRegression()

now I am not sure how to setModel equivalent to new PolynomialRegression().

This is what I have so far:

import React, { useRef, useState } from "react";import PolynomialRegression from "./Regression";interface MyProps {    color: string;    deg: any;    x: number[];    y: number[];}interface MyState {    hoverMode: any;    x: number[];    y: number[];}export const Final: React.FunctionComponent<MyProps> = ({  color, deg, x, y }) => {  const [model, setModel] = useState<any>();  const [chart, setChart] = useState<any>();  let chartRef: any = useRef<any>();  function fit() {        if (x.length === 0 && y.length === 0)            setModel(new PolynomialRegression());        else            model.train(x, y, deg);  }      useEffect(() => {    let data = [],    regression_points = [];  for (let i = 0; i < x.length; i++) {    data.push(      { x: x[i], y: y[i] }    );  }  for (let i = 0; i < 1; i += 0.05) {    regression_points.push({ x: i, y: model.predict(i) });  }  //setChart.data.datasets[0].data = data;  })  return (<div className="w-100 d-flex justify-content-center"><div className="h-auto" style={{ width: 800 }}><canvas ref={chartRef.current} /></div></div>  );}

I prepared a codesandbox with both Inital and Final components: https://codesandbox.io/s/infallible-thunder-xsbrm?file=/src/Final.tsx

How can I convert this class component into a functional one?