NextAuth Credentials returns null after successfully fetch data

Currently I'm having trouble implementing next-auth credentials provider into my system.

I'm using axios (to a different localhost) to verify the credentials (email & password).

• Nextjs system run in http://localhost:3000
• Node Server run in http://localhost:5400

These are the problems I'm currently facing:-

1. after successful login, I was redirect to http://localhost:5400 (blank screen). This is true even when I logout from the system. it still redirect me to the same url.
2. even after successful login, user returns null. The only data I get from the session is expires

My current code now:-

• demo button to call signIn & signOut:-

// in homepage (pages/home.js)
import { signIn, signOut, useSession } from 'next-auth/client'

export default Homepage = () => {
  const [ session ] = useSession()  
  console.log(session) 
  // returns 'null' (when not login yet)
  // returns { expires: "2021-06-28T08:59:47.504Z", user: { name: null, email: null, image: null, _proto_: Object }, _proto_: Object } after successful login  

  return (
    <>
       {!session ? 
        <>
          Sign-in to continue
          <button onClick={() => {
            signIn('credentials', 
            { 
              email: '[email protected]', 
              password: 'qwer1234', 
              callbackUrl: `${window.location.origin}/about` 
            })
            }}>SignIn</button>
        </> 
      :
        <>
          {session.user.email}
          <button onClick={() => signOut()}>SignOut</button>
        </>
      
      }
    </>
}

• [...nextauth].js:-

import axios from 'axios'
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { config } from '../../../src/utils/Header'

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: 'Portfolio V4 Credentials',
      credentials: {
        email: { label: "Email", type: "email", placeholder: "Please enter an email" },
        password: { label: "Password", type: "password", placeholder: "Please enter a password" }
      },
      async authorize(credentials, req) {
        try {
          const res = await axios.post(
            process.env.REACT_APP_SERVER_ENDPOINT_HOST + "/api/auth/callback/credentials", 
            { uid: '', email: credentials.email, password: credentials.password },
            config
          )
          const user = await res
          
          if (user.data.success) {
            console.log(user.data) // this logouts { success: true, data: { uid: '5f8fc26c6a103b243428bec1', sato: 1622295126589 } }
            return user.data
          }
        } catch (e) {
          console.log('Error: ')
          console.log(e)
          return null
        }
      }
    })
  ]
})

I did change the content of user to what I get from the server. But it didn't reflect at all what's in the session I console.log above. It still console.log:-

{
  expires: "2021-06-28T08:59:47.504Z",
  user: {
    email: null,
    image: null,
    name: null,
    _proto_: Object
  },
  _proto_: Object
}