I am trying to use Material Design to build a dual stacked bar chart using Typescript and react-google-charts.

This is what I've tried : https://codesandbox.io/s/google-charts-playground-forked-xr60b?file=/src/App.tsx

export default function App() {
  const Header: Array<Array<any>> = [
    [
      { type: "datetime", label: "Month" },
      { type: "number", label: "Compnay A - Top 1 Product" },
      { type: "number", label: "Compnay A - Top 2 Product" },
      { type: "number", label: "Other - Top 1 Product" }, // 3rd data table column
      { type: "number", label: "Other - Top 2 Product" }
    ]
  ];

  const testData: Array<Array<any>> = [
    [new Date(2021, 1, 1), 30, 40, 20, 40],
    [new Date(2021, 2, 1), 10, 20, 30, 40]
  ];
  const Options = {
    isStacked: true,
    series: {
      // 3rd data table column
      2: {
        targetAxisIndex: 1
      },
      // 4th data table column
      3: {
        targetAxisIndex: 1
      }
    }
  };

  return (
    <div className="App">
      <Chart
        data={Header.concat(testData)}
        chartType="Bar"
        options={google.charts.Bar.convertOptions(Options)}
      />
    </div>
  );

Sometimes I see my graph, but even though I see - there is an error on the console Bar is not a property of charts. Which if I look at the docs ofDefinitelyTyped is valid.

How is that rendered if this is undefined? If I enable strict on another project, I get a complain about either cannot find google or bar is not a property of charts.

What am I missing?

When this is working, this is what I see :

PS : I started with a Javascript solution as shown here which sometimes work, and sometimes it also gives me an error for cannot find google.

I tried installing @types/google-visualization but error comes and go.