How can i control animation on Legend Click in ChartJS

[JalajYadav]

Hello People,
There is a certain requirement that has to be met in a project that i am working on.
I had to create custom Legend component which shall match with the design we had , i wish to animate the chart onLegendClick.

📄Legend.jsx

import React, { memo, useState, useEffect } from "react";
import { Doughnut } from "react-chartjs-2";
import { makeStyles } from "@material-ui/core";

import { Colours, leadsOptions } from "./DashboardUtils.js";
import Legends from "./Legends.jsx";

const useStyles = makeStyles((theme) => ({
    chartContent: {
        height: "22vh",
        minHeight: "286px",
        width: "100%",
    },
    flexCenter: theme.mixins.flex("center", "center"),
    noData: {
        fontSize: "1.1rem",
        fontFamily: theme.mixins.regularText,
        color: theme.palette.sitegray.main
    },
}));

function LeadsChart(props) {
    const classes = useStyles();

    const [labels, setLabels] = useState([]);
    const [labelsList, setLabelsList] = useState([])
    /*
    * labelsList is array of Lead Sources with count concatenated 
    * labels [{title: 'Unknown Source (19)', isClicked: false}]
    * labelList ["Unknown Source (19)"]
    */

    const datasetData =
        props.data?.list?.length
            ? props.data.list.map(element => element.count)
            : []

    const uptoBgColorIndex = labels.length + (labels.length === 1 ? 0 : 1)
    const backgroundColor = Colours.slice(0, uptoBgColorIndex)

    let data = {
        labels:labelsList,
        datasets: [
            {
                label: "Leads",
                data: datasetData,
                backgroundColor,
                borderWidth: 0,
                hoverOffset: 40,
                radius: 80,
                cutout: "65%",
            },
        ],
    };

    useEffect(()=>{
            if (labels.length) {
                const currentLabelsList = [];
                labels.forEach(
                    element => {
                        if(!element.isClicked){
                            currentLabelsList.push(element.title);
                        }
                    }
                );
                setLabelsList([...currentLabelsList])
            }
    },[labels]);
    

    useEffect(() => {
        let labels = [];
        if (props.data?.list?.length) {
            props.data.list.forEach(element => labels.push({
                title: `${element.source} (${element.count})`,
                isClicked: false,
            })
            )
        }
        setLabels([...labels]);
    }, [props.data.list]);

    const onLegendClick = (labelTitle) => {
        labels.forEach(element => {
            if (element.title === labelTitle) {
                element.isClicked = !element.isClicked;
            }
        });
        setLabels([...labels]);
    };

    return (
        <>
            {
                !props.data?.list?.length
                    ? (
                        <div className={classes.flexCenter}>
                            <p className={classes.noData}>No Data Found.</p>
                        </div>
                    )
                    : (
                        <div className={classes.chartContent} style={{ display: 'flex' }}>
                            <div style={{ width: '210px', height: '270px' }}>
                                <Doughnut
                                    data={data}
                                    options={leadsOptions}
                                />
                            </div>
                        
                            <Legends
                                legendTitle="Leads Sources"
                                legendLabels={labelsList}
                                backgroundColor={backgroundColor}
                                onLegendClick={onLegendClick}
                            />

                        </div>
                    )
            }
        </>
    );
}

export default memo(LeadsChart)

Is there a property that can be used to animate the chart, i can control the data by filtering it out but i was not able to animate it❓❓❓❓