How to use the react-chartjs-2.Chart.pluginService function in react-chartjs-2

useEffect(() => {
		Chart.pluginService.register({
			afterDraw: function(chart) {
				if (chart.tooltip._active && chart.tooltip._active.length) {
					const activePoint = chart.controller.tooltip._active[0]
					const ctx = chart.ctx
					const x = activePoint.tooltipPosition().x
					const topY = chart.scales['y-axis-1'].top
					const bottomY = chart.scales['y-axis-1'].bottom
					ctx.save()
					ctx.beginPath()
					ctx.moveTo(x, topY)
					ctx.lineTo(x, bottomY)
					ctx.lineWidth = 1 // line width
					ctx.setLineDash([1, 5])
					ctx.strokeStyle = '#C0C0C0' // color of the vertical line
					ctx.stroke()
					ctx.restore()

componentWillMount() {
    Chart.pluginService.register({
      beforeDraw: plugin
    });
  }

componentDidMount() {
    Chart.pluginService.register({
      realtime: RealTimePlugin
    })
  }
  render() {

componentDidMount() {
    Chart.pluginService.register({
      id: 'hideAxisX',
      afterDraw(chartInstance) {
        drawGradientRectangle(chartInstance, {
          bottomPosition: bottomPadding + 32,
          height: 10,
        });
      },
    });
  }

UNSAFE_componentWillMount() {
    ReactChart.pluginService.register(pieceLabel)
  }