Nextjs로 카카오맵 SDK 사용 중 문제가 있습니다

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/setBounds
현재 이 부분을 사용하려 합니다. 다른 예제는 정상적으로 동작하나 코드에 new가 들어가면 문제가 생깁니다.

function(){
const Main = () => {
const mapRef = useRef()
const [points, setPoints] = useState([
{lat: 33.452278, lng:126.567803},
{lat: 33.452671, lng:126.574792},
{lat: 33.451744, lng:126.572441},
])

const bounds = useMemo(() => {
  const bounds = new kakao.maps.LatLngBounds();

  points.forEach(point => {
    bounds.extend(new kakao.maps.LatLng(point.lat, point.lng))
  });
  return bounds;
}, [points])

return (
  <>
    <Map // 지도를 표시할 Container
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        width: "100%",
        height: "450px",
      }}
      level={3} // 지도의 확대 레벨
      ref={mapRef}
    >
      {points.map(point => <MapMarker key={`${point.lat}-${point.lng}`} position={point} />)}
    </Map>
    <button
      onClick={() => {
        const map = mapRef.current
        if (map) map.setBounds(bounds)
      }}
    >
      지도 범위 재설정 하기
    </button>
  </>
)

}
return ()
}

  1. 그대로 구동 시 kakao is not defined 에러가 발생합니다.

  2. useMemo → useEffect 수정하면 kakao.maps.LatLngBounds is not a constructor 에러가 발생합니다.

  3. useMemo → useEffect 수정한 상태에서
    new kakao.maps.~~ → 앞에 window를 붙여 new window.kakao.maps.~~ 수정하면 위와 같은
    kakao.maps.LatLngBounds is not a constructor 에러가 발생합니다.

2, 3 의 경우 추가적으로 콘솔에 아래 에러가 뜹니다.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

이 외에 다른 방법도 시도해 보았으나 코드에 대한 이해가 부족한 상태에서 시도하니 이렇게 저렇게 해봐도 갈피를 못 잡겠습니다.
혼자 해결할 수 없다고 판단되어 개발자님들께 도움 요쳥합니다. 긴 글 읽어주셔서 감사합니다.

타입스크립트 없이 Nextjs만 사용 중 입니다.

사용하고 계신 리액트 컴포넌트는 공식적으로 제공하는 SDK가 아니기 때문에 답변드리기 어려운 점 양해 부탁드립니다.
아래 링크는 저희가 제공하고 있는 리액트 예제입니다.
OpenAPI를 사용하셔야 문의에 대한 답변이 가능한 점 참고 부탁드립니다.
https://codesandbox.io/s/gifted-wescoff-77nwu