I was working on adding legend interactivity to the chart generated from below vega lite spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {
        "date": "2024-05-13",
        "A": 10,
        "B": 20,
        "C": 30
      },
      {
        "date": "2024-05-14",
        "A": 15,
        "B": 25,
        "C": 35
      },
      {
        "date": "2024-05-15",
        "A": 20,
        "B": 30,
        "C": 40
      },
      {
        "date": "2024-05-16",
        "A": 25,
        "B": 35,
        "C": 45
      },
      {
        "date": "2024-05-17",
        "A": 30,
        "B": 40,
        "C": 50
      }
    ]
  },
  "params": [
    {
      "name": "LEGEND_HIGHLIGHT",
      "select": {
        "type": "point",
        "fields": [
          "combinedColumn"
        ]
      },
      "views": [
        "CHART_0"
      ],
      "bind": "legend"
    }
  ],
  "layer": [
    {
      "transform": [
        {
          "fold": [
            "A",
            "B"
          ],
          "as": [
            "combinedColumn",
            "value"
          ]
        }
      ],
      "encoding": {
        "x": {
          "field": "date",
          "type": "ordinal"
        },
        "color": {
          "field": "combinedColumn",
          "type": "nominal"
        },
        "opacity": {
          "condition": {
            "param": "LEGEND_HIGHLIGHT",
            "value": 1
          },
          "value": 0.2
        }
      },
      "layer": [
        {
          "name": "CHART_0",
          "transform": [
            {
              "filter": "datum.combinedColumn == 'A'"
            }
          ],
          "mark": {
            "type": "line",
            "tooltip": true
          },
          "encoding": {
            "y": {
              "field": "value",
              "type": "quantitative"
            }
          }
        },
        {
          "transform": [
            {
              "filter": "datum.combinedColumn == 'B'"
            }
          ],
          "mark": {
            "type": "line",
            "tooltip": true
          },
          "encoding": {
            "y": {
              "field": "value",
              "type": "quantitative"
            }
          }
        }
      ]
    }
  ]
}

The above vega lite spec is rendering fine in the vega lite editor along with the interactivity for legends but the interactivity is lost while rendering the chart using the below React component

renderer.tsx

import React from 'react';
import * as vega from 'vega';
import { compile } from 'vega-lite';
import cloneDeep from 'lodash/cloneDeep';
interface IProps {
  id: string;
  vegaSpec: any;
}

interface IState {
  id: string;
}

class VegaRenderer extends React.PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      id: props.id,
    };
  }

  render() {
    const { id } = this.props;
    return (
        <div className="vega-graph-container">
          <div id={id}></div>
        </div>
    );
  }

  componentDidMount() {
    if (typeof this.props.vegaSpec != 'object') {
      return;
    }
    this.renderVega(this.props.id);
  }

  componentDidUpdate(previousProps: any, previousState: any) {
    if (typeof this.props.vegaSpec != 'object') {
      return;
    }
    this.renderVega(this.props.id);
  }

  async renderVega(id: string) {
    let spec = cloneDeep(this.props.vegaSpec);
    let view;
    let runtime;
    try {
      const vegaSpec = compile(spec).spec;
      runtime = vega.parse(vegaSpec);
      view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(document.querySelector(`#${id}`))
        .renderer('svg');
      view.hover();
      await view.runAsync();
    } catch (err) {
      console.error(err);
      throw err;
    } finally {
        if (view) {
          // Releasing memory
          view.finalize();
        }
    }
  }
}

export default VegaRenderer;

Can you please help me find what I am missing in my React component that is causing the loss of interactivity in the rendered chart?

I was using Vega-Lite version 5.7.0. I tried upgrading it to 5.19.0 and Vega to 5.30.0, which is also being used by the Vega-Lite open-source editor. But still, no luck. Could someone please suggest what I am missing here, as ideally it should work?