Используйте html элементов в качестве легенды в Reaction-Chartjs

Question

Я учусь, реагирующая диаграмма js. До сих пор изучаю различные концепции реактивной диаграммы js. Я застрял в проблеме: как я могу создать пользовательскую легенду на диаграмме js, чтобы иметь полный контроль над ней? Я go через несколько вопросов переполнения стека относительно одного и того же. Я также погуглил по поводу этой топи c, но не получил никакого удовлетворенного ответа на проблему.

Вот мой код реагирующего компонента. Я хочу два элемента li, которые ведут себя так же, как легенда. Я копирую код из вопроса переполнения стека, но он не работает.

import React from 'react';

import {Bar} from 'react-chartjs-2';
const recovery={
    labels:['Feb 15','Feb 16','Feb 17','Feb 18','Feb 19','Feb 20','Feb 21','Feb 22','Feb 23','Feb 24','Feb 25',
            'Feb 26','Feb 27','Feb 28','Feb 29','Mar 1','Mar 2','Mar 3','Mar 4','Mar 5','Mar 6','Mar 7','Mar 8',
             'Mar 9','Mar 10','Mar 11','Mar 12','Mar 13','Mar 14','Mar 15','Mar 16','Mar 17','Mar 18','Mar 19','Mar 20',
            'Mar 21','Mar 22','Mar 23','Mar 24','Mar 25'],
    datasets:[
        {
            label:'Corona Patients Recover and New Case DaiLy Basis In India',
            backgroundColor:'green',
            borderColor:'#333',
            borderWidth:2,
            data:[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,6,7,29,30,31,34,40,47,62,74,82,100,114,129,143,169,194,249,
                332,396,499,536,657]
        },
        {
            label:"Corona Death",
            backgroundColor:"red",
            borderColor:'#333',
            borderWidth:2,
            lineTension:0.1,
            fill:true,
            data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,3,3,
               4,5,5,7,10,10,12]

            }
    ]

}

class CoronaRecovery extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={}
    }
    render()
    {
        return(
            <div className="row">
                <Bar 
                data={recovery}
                options={{
                    title:{
                        text:'Corona Patient Recovery',
                        display:true,
                        fontSize:20
                    },
                    legend:{
                        display:false,
                        legendCallback: function(chart) {
                            var ul = document.createElement('ul');
                            var borderColor = recovery.data.datasets[0].borderColor;
                            recovery.data.labels.forEach(function(label, index) {
                               ul.innerHTML += `
                                   <li>
                                      <span style="background-color: ${borderColor[index]}"></span>
                                     ${label}
                                  </li>
                               `; // ^ ES6 Template String
                            });
                            return ul.outerHTML;
                         }
                    }
                }}
                />

            </div>
        )
    }
}

export default CoronaRecovery;