I can't use react-raphael in nextJs project

[MustaphaBoulanfad]

Hello guys, I am stuck in a problem of using react-raphael in nextjs project, i tried the way that shows in docs and show to me error of window is undefinied. code :

import React, { useRef, useState, useEffect } from "react";
import { Paper, Circle } from "react-raphael";

const Tables = () => {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
      setDimensions({
        width: divRef.current.offsetWidth,
        height: divRef.current.offsetHeight,
      });
    }
  }, []);

  return (
    <div ref={divRef} style={{ width: "100%", height: "calc(100% - 55px)" }}>
      <Paper
        width={dimensions.width}
        height={dimensions.height}
        container={{ style: { backgroundColor: "red" } }}
      >
        <Circle cx={50} cy={50} r={40} fill="red" />
      </Paper>
    </div>
  );
};

export default Tables;

Error

error - ReferenceError: window is not defined
    at Object.<anonymous> (F:\UPXP Projects\manager\openflow-manager\node_modules\raphael\raphael.min.js:1:196)

I also tried to use dynamic import in nextjs but still doesn't work code

import React, { useRef, useState, useEffect } from "react";
import dynamic from "next/dynamic";
const ReactRaphael = dynamic(
  () => {
    return import("react-raphael");
  },
  { ssr: false }
);

const Tables = () => {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
      setDimensions({
        width: divRef.current.offsetWidth,
        height: divRef.current.offsetHeight,
      });
    }
  }, []);

  return (
    <div ref={divRef} style={{ width: "100%", height: "calc(100% - 55px)" }}>
      <ReactRaphael.Paper
        width={dimensions.width}
        height={dimensions.height}
        container={{ style: { backgroundColor: "red" } }}
      >
        <ReactRaphael.Circle cx={50} cy={50} r={40} fill="red" />
      </ReactRaphael.Paper>
    </div>
  );
};

export default Tables;

error :

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Tables`.

i can't figute out whats happen and how to solve this problem, my confige is _``` "raphael": "^2.3.0", "react": "^17.0.2", "next": "^12.0.8", "react-raphael": "^0.9.0", nodejs Version : v16.13.1

thanks a lot