React Google Charts is constantly Re Rendering the charts

Question

I am working on React Google Charts to create few graphs for a project. The problem that I am facing 2 problems. 1- The Charts are re-rendering constantly in DOM. DOM constantly updating due to charts re re-rendering 2- The tooltips are stretched on the full width of chart. Tooltip fully stretched

Here is my code for the Area Chart (Heart Rate).

import React from "react";
import { Chart } from "react-google-charts";

export const AreaChart = ({ data }) => {
  const options = {
    title: "Heart Rate",
    hAxis: { maxValue: 500, minValue: 0, baselineColor: "transparent" },
    vAxis: {
      gridlines: { color: "grey", minSpacing: 10, count: 1 },
      minorGridlines: { color: "grey", count: 0 },
      maxValue: 120,
      minValue: 0,
      baselineColor: "transparent",
    },
    curveType: "function",
    legend: { position: "none" },
    chartArea: { width: "80%", height: "90%" },
    areaOpacity: 0.2,
    colors: ["red", "green"],
  };


  return (
    <Chart
      chartType="AreaChart"
      width="100%"
      height="90px"
      data={data}
      options={options}
    />
  );
};

Note: Everything is Working perfectly on the React Google Charts' real time graphing engine with same options/settings and data.