HTTP 302 Redirect when using OAuth nextjs - reactjs

Question

i'm trying to put OAuth in my project but after i log in with my gmail the default redirect page will show up and say's that i have to
Try signing in with a different account.
here's my code
import Image from "next/image"
import { signIn } from "next-auth/react"
export default function Login({ provider }) {
return (
<div className="flex flex-col items-center space-y-20 pt-48">
<Image
src="/image/pictures/twitter-icon-svg-28.jpg"
width={150}
height={150}
objectFit="contain"
className="bg-transparent"
/>
{Object.values(provider).map(provider => {
return (
<div key={provider.name} className="flex flex-col items-center space-y-20 pt-48">
<button onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
<a href="#_" className="relative inline-flex items-center justify-center px-6 py-3 text-lg font-medium tracking-tighter text-white bg-gray-800 rounded-md group">
<span className="absolute inset-0 w-full h-full mt-1 ml-1 transition-all duration-300 ease-in-out bg-blue-600 rounded-md group-hover:mt-0 group-hover:ml-0"></span>
<span className="absolute inset-0 w-full h-full bg-white rounded-md "></span>
<span className="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out delay-100 bg-blue-600 rounded-md opacity-0 group-hover:opacity-100 "></span>
<span className="relative text-blue-600 transition-colors duration-200 ease-in-out delay-100 group-hover:text-white">
Signin With {provider.name}
</span>
</a>
</button>
</div>
)
})}
</div>
)
}
i set everything needed for google credential and nextauth_URL in env.local file but i don't know why am i getting 302 redirect error and cant log in into my website