ChartJS - Stacked Bar Chart, unable to trigger callback function for tooltips

I have a stacked bar chart, but I am unable to trigger the callback functions associated with the tooltip.

import Chart from "chart.js/auto";
import { Bar } from "react-chartjs-2";

const data = {
    datasets: [
      {
        type: 'bar',
        data: [], //value - set through programming
        order: 1
      },
      {
        type: 'bar',
        data: [],
        order: 1
      }
    ]
  };

const options = {
         plugins: {
             tooltip: {
             enabled: true,
             callbacks: {
                footer: function(context) {
                    console.log("test");
                    return "test";
                }
             }
        }
    }

class myChart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: data,
            options: options
        }
    }

    render() { 
        return (
            <div className="chart" id="chart">
                <Bar data={this.state.data} options={this.state.options}/>
            </div>
        );
    }
    }

export default myChart;

The footer never appears, nor do i see the word "test" in the console of the developer tools. I'm not sure why the callback functions aren't triggering. Nothing I do will change the footer on the tooltip.

The other tooltip options work, such as the enabled field, bodyColor, etc, but the callbacks just dont trigger, which makes me think its a "me" problem.

tooltip

Any help is always appreciated.

I was able to figure out the issue. There was a section of my code where i was calling state and strigifying the JSON object, thus removing the actual function.

let options = JSON.parse(JSON.stringify(this.state.options));

I updated my code to remove the strigify:

let options = {...this.state.options}

It's working as intended now.