TypeError: Cannot read properties of undefined (reading 'document') AnyChart Heatmap

Versions: anychart: ^8.12.0 next: 14.0.3

I'm encountering an error when trying to use AnyChart in my Next.js project. The error message I'm receiving is:

⨯ node_modules/anychart/dist/js/anychart-bundle.min.js (10:361) @ document
 ⨯ TypeError: Cannot read properties of undefined (reading 'document')
    at __webpack_require__ (/home/nayeem/Documents/nErin_next_v1/v1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/home/nayeem/Documents/nErin_next_v1/v1/.next/server/webpack-runtime.js:33:42)
    at eval (./app/dashboard/heat_map/page.jsx:10:66)
    at (ssr)/./app/dashboard/heat_map/page.jsx (/home/nayeem/Documents/nErin_next_v1/v1/.next/server/app/dashboard/heat_map/page.js:346:1)
    at __webpack_require__ (/home/nayeem/Documents/nErin_next_v1/v1/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
null

here the code is running but when i try to build the project.it's giving me that error in my heatmap. I haven't found anything about this error. Anyone got a solution for that or knows, what im doing wrong?

"use client";
import { useEffect, useState } from "react";
import axios from "axios";
import anychart from "anychart";

export default function HeatMapChart() {
  const [tableData, setTableData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("/api/get-heatmap");
        setTableData(response.data.data);
        // console.log("heatmap", tableData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData(); 
  }, []);

  useEffect(() => {
    if (!tableData || typeof window === "undefined") return; 

    // Convert data to format compatible with anychart
    const formattedData = tableData.map((item) => ({
      custom: item.score,
      x: item.likelihood_critical,
      y: item.impact_critical,
      heat: item.registersCount,
      fill: item.color,
    }));
    const reversedFormattedData = [...formattedData].reverse();

    // create a chart and set the data
    const chart = anychart.heatMap(reversedFormattedData);

    // Add click event listener to the chart
    chart.listen("pointClick", async function (e) {
      const clickedCustom = e.point.get("custom");
      // const clickedHeatValue = e.point.get("heat");
      // const clickedX = e.point.get("x");
      // const clickedY = e.point.get("y");

      try {
        const response = await axios.get(`/api/get-heatmap/${clickedCustom}`);
        // console.log(response.data);
        setData(response.data.scoreData);
        // Do whatever you want with the response data
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    });

    // set the chart title
    chart.title("Heat Map");

    // set the container id
    chart.container("container");

    chart.draw();

    return () => {
      chart.dispose();
    };
  }, [tableData]); 

  return (
    <div>
      <div id="container" style={{ width: "100%", height: "400px" }}></div>
    </div>
  );
}

Reviewed documentation and searched for similar issues online. Attempted to troubleshoot by commenting out different parts of the code to isolate the issue. Verified that anychart is correctly installed and imported.

I suspect that the issue might be related to server-side rendering (SSR) in Next.js conflicting with AnyChart's client-side functionality. However, I'm not sure how to resolve this conflict or if there's a workaround I can implement.