I am really new to nextjs and react so this is probably a really dumb question.

I am using the useWindowSize function, but I think it is not returning the actual value when the function is called for the first time as the aspect ration seems to be whatever is followed after the || (100/50 in this class), so I assume I need to wait until the function returns something that isn't null and then change the innerWidth and innerHeight accordingly. I would also like to have the aspect ratio change everytime the window is resized, can anyone point me to the right direction? Thanks a lot.

import { useState } from 'react'
import dynamic from 'next/dynamic';
import useWindowSize from "@rooks/use-window-size"

const DynamicMap = dynamic(() => import('./DynamicMap'), {
  ssr: false
});

// Set default sizing to control aspect ratio which will scale responsively
// but also help avoid layout shift


const Map = (props) => {
  const { innerWidth, innerHeight } = useWindowSize();
  const [windowSize, setWindowSize] = useState({
    innerWidth: innerWidth || 100,
    innerHeight: innerHeight || 50,
  });


  const { width = windowSize.innerWidth, height = windowSize.innerHeight } = props;
  return (
    <div style={{ aspectRatio: width/height}}>
      <DynamicMap {...props} />
    </div>
  )
}

export default Map;