When I replace useRouter's source next/router to next/navigation, I was faced an error with a method of useRouter.
Avoid referencing unbound methods which may cause unintentional scoping of this.
If your function does not access this, you can annotate it with this: void, or consider using an arrow function instead.
My code is here,

'use client'

(...)
import { useRouter } from 'next/navigation'
import { useContext, useEffect } from 'react'

export type Props = {
  params: { code: string }
}

export const OAuth = ({ params }: Props) => {
  const { replace } = useRouter() // error happens here
  const userContext = useContext(UserContext)
  const { setUser } = userContext
  const toast = useCustomToast()
  const { mutate: oauthLoginMutate } = useMutation({ mutationFn: oauthSignup })

  useEffect(() => {
  
    oauthLoginMutate(
     (...)
      {
        onSuccess: (res) => {
          localStorage.setItem(StorageKey.aceessToken, res.access)
          localStorage.setItem(StorageKey.refreshToken, res.refresh)
          setUser(res.user)
          replace('/')
        },
        onError: () => {
          replace('/auth/signin')
          toast({
            title: EXIST_MSG,
            status: 'error',
          })
        },
      }
    )
  }, [code, oauthLoginMutate, replace, setUser, toast])

  return <></>
}

I added the rule '@typescript-eslint/unbound-method': 'warn' to the ESLint configuration to resolve the issue for now, but I'm curious why this issue occurs and if there is a way to fix it without modifying the ESLint rule.