useEffect getting triggered repeatedly even after applying [] brackets

Question

I was learning react and came across the concept of useEffect. So I was trying useEffects with resize event listeners and when doing so even after applying the square bracket which should be used only to run the useEffect once, I am repeatedly getting the updated size of the screen when trying the change the browser size.

below is the code, could some one please let me know if I have some code issue or is this how it is supposed to work?

import React, { useState, useEffect } from "react";

// cleanup function
// second argument

const UseEffectCleanup = () => {
  const [size, setsize] = useState(window.innerWidth);

  const checkSize = () => {
    console.log("check size");
    setsize(window.innerWidth);
  };

  useEffect(() => {
    console.log("use effect");
    window.addEventListener("resize", checkSize);
    return () => {
      console.log("Cleanup");
      window.removeEventListener("resize", checkSize);
    };
  }, []);

  return (
    <>
      <h2>Windows Width</h2>
      <h2>{size}</h2>
    </>
  );
};

export default UseEffectCleanup;