hey folks I have written this code to open up the sign-in page from next-auth library in a new window using the react-new-window library but the problem with this code as soon as I click on the button the new window opens up and it immediately closes

import { useEffect } from "react";
import { signIn, useSession } from 'next-auth/react';

const SignInPage = () => {
    const { data: session, loading } = useSession();
    useEffect(() => {
        if(!loading && !session) void signIn('discord')
        if(!loading && session) window.close()
    }, [ session, loading ])
    return null
}

export default SignInPage

import { useState } from 'react';
import NewWindow from 'react-new-window';
import { signIn, useSession } from 'next-auth/react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

export default function Home() {
  const { data: session, status } = useSession();
  const [popup, setPopUp] = useState(false);
  return (
    <Box>
      <Button color="inherit" onClick={() => setPopUp(true)}>Login</Button>
      { popup && !session ? (
        <NewWindow url='./SignInPage' onUnload={() => setPopUp(false)} />
) : null }
    </Box>
)
}

after doing some debugging I found out that onUnload in

<NewWindow url='./SignInPage' onUnload={() => setPopUp(false)} />

is executing automatically which is not supposed to execute automatically it should be triggered after I get the session please help me in resolving this issue