Is it possible that custom hooks were not successfully imported? I tried every technique to import the file and received this error

Error: (0 , hooks_useWindowsDimension__WEBPACK_IMPORTED_MODULE_2_.default) is not a function. Don't Custom hooks code

"use client"

import { useEffect, useState } from "react";

const useWindowsDimension = (): { width: number; height: number } => {
  const [windowDimension, setWindowDimension] = useState({
    width: typeof window !== "undefined" ? window.innerHeight : 0,
    height: typeof window !== "undefined" ? window.innerHeight : 0,
  });

  useEffect(() => {
    function handleResize(): void {
      setWindowDimension({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimension;
};

export default useWindowsDimension;

import useWindowsDimension from "@/hooks/useWindowsDimension";

export default function Home() {
  const { width, height } = useWindowsDimension();
  return (
    <div>
      <canvas className="bg-blue-500" width={width} height={height} />
    </div>
  );
}

When the website reloads, I expect the canvas to immediately take up the entire width and height of the screen, but instead I get this strange problem. How can I overcome this mistake and why am I receiving it?

If there is a better method to this, it will be welcomed.

1. Ensure this import path (@/hooks/useWindowsDimension) is correct relative to your project structure. The @ symbol typically represents an alias or shortcut defined in your project's configuration (like webpack or babel), so double-check that this alias is correctly mapped to your src or equivalent directory.

2. If you're using TypeScript (as indicated by the .tsx file extension), ensure your TypeScript configuration (tsconfig.json) is correctly set up and there are no compilation errors related to paths or module resolution.

For immediate rendering of the canvas to fill the screen dimensions, you might also consider using CSS for sizing:

<div style={{ width: '100vw', height: '100vh' }}>
  <canvas className="bg-blue-500" width={width} height={height} />
</div>