Make Custom session next-auth

I got an problem when migrate my js file jo tsx, what I'm doing is signin with credentials and custom the session user to my user data

// api/auth/[...nextauth].js

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import { ConnectDatabase } from "../../../lib/db";
import { VertifyPassword } from "../../../lib/password";
import { getSelectedUser } from "../../../helpers/database";
import { MongoClient } from "mongodb";
import { NextApiRequest } from "next";

interface credentialsData {
  data: string | number;
  password: string;
}
export default NextAuth({
  session: {
    jwt: true,
  },
  callbacks: {
    async session(session) {
      const data = await getSelectedUser(session.user.email);
      session.user = data.userData;

// inside data.userdata is a object
// {
//   _id: '60a92f328dc04f58207388d1',
//   email: '[e-mail]',
//   phone: '087864810221',
//   point: 0,
//   role: 'user',
//   accountstatus: 'false'
// }
      return Promise.resolve(session);
    },
  },
  providers: [
    Providers.Credentials({
      async authorize(credentials: credentialsData, req: NextApiRequest) {
        let client;
        try {
          client = await ConnectDatabase();
        } catch (error) {
          throw new Error("Failed connet to database.");
        }

        const checkEmail = await client
          .db()
          .collection("users")
          .findOne({ email: credentials.data });
        const checkPhone = await client
          .db()
          .collection("users")
          .findOne({ phone: credentials.data });

        let validData = {
          password: "",
          email: "",
        };

        if (!checkEmail && !checkPhone) {
          client.close();
          throw new Error("Email atau No HP tidak terdaftar.");
        } else if (checkEmail) {
          validData = checkEmail;
        } else if (checkPhone) {
          validData = checkPhone;
        }

        const checkPassword = await VertifyPassword(
          credentials.password,
          validData.password
        );
        if (!checkPassword) {
          client.close();
          throw new Error("Password Salah.");
        }
        client.close();

// inside validData is a object
// {
//   _id: '60a92f328dc04f58207388d1',
//   email: '[e-mail]',
//   phone: '087864810221',
//   point: 0,
//   role: 'user',
//   accountstatus: 'false'
// }

        return validData;
      },
    }),
  ],
});
// as default provider just return session.user just return email,name, and image, but I want custom the session.user to user data what I got from dababase

This in client side

// index.tsx

export const getServerSideProps: GetServerSideProps<{
  session: Session | null;
}> = async (context) => {
  const session = await getSession({ req: context.req });

  if (session) {
    if (session.user?.role === "admin") {
      return {
        redirect: {
          destination: "/admin/home",
          permanent: false,
        },
      };
    }
  }
  return {
    props: {
      session,
    },
  };
};

But in client side I got warning

Property 'role' does not exist on type '{ name?: string; email?: string; image?: string; 

actually my file still working fine, but when my file in

 format, its not warning like that

can someone help me to fix it ?