How can I prevent my React component from rendering multiple times while authenticating a user?

I have my App.js re-rendering multiple times. Is there a way to optimize that? <React.StrictMode> is already removed. I also tried without useMemo and having these 3 variables in the array for useEffect.

export default function App() {
    const { instance, accounts, inProgress } = useMsal();

    const callLogin = useMemo(() => {
        return () => {
            console.log("Inside callLogin");
            const isAuthenticated = accounts.length > 0;

            if (!isAuthenticated && inProgress === InteractionStatus.None) {
                instance.loginRedirect();
            }
        };
    }, [instance, accounts, inProgress]);

    console.log("I'm inside App.js!");

    useEffect(() => {
        console.log("App.js useEffect");
        callLogin();
    }, [callLogin]);
    return 
        (<SomeComponent />)
}

This is what it looks like after one hard clean refresh. You can ignore Kendo warnings.

This is how App.js is called in index.js

ReactDOM.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
  document.getElementById('root')
);