ReactJS Keycloak : Home page call infinite time after reloading on application

Question

We have integrated@react-keycloak/webpackage in our reactjs application, after successful login via SSO Login in our reactjs application its comes to Home page bydefault, if we navigate to any of pages in our application or we stay on the home page and reload the page using browser reload, we noticed that Home page component calls infinite times and API's which we are calling with home page calls infinite time .

Version - 1) "react": "18.2.0"
2) "react-dom": "18.2.0"
3) "keycloak-js": "21.1.1"
4) "@react-keycloak/web": "3.4.0"
5) "react-router-dom": "5.1.2"

Note - 1) This issue is occurring only when we login via SSO login, If we login via username and password then the issue is not observed.
2) We are updating the state of home page using useEffect hook with [] dependency array, we are not updating the state on render method so, using jsx code unnecessary rendering is not issue.

// Home page component loads first time
useEffect(() => {
// API's calls when home page component load and state updates
...
},[])

3)We are not using <React.StrictMode> ... </React.StrictMode> in our application .
4) checkLoginIframe:false tried with this config but didn't work.

Sharing code for reference.

1. keycloak.js

import Keycloak from "keycloak-js";
import { Config } from "./src/enums";

const keycloakConfig = {
    "realm": Config.KEYCLOAK_REALM,
    "url": `${Config.KEYCLOAK_URL}`,
    "ssl-required": "external",
    "clientId": Config.KEYCLOAK_CLIENT_ID,
    "public-client": true
};

const keycloak = new Keycloak(keycloakConfig);
export default keycloak;

2. Keycloak Initialzation

src\index.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./../keycloak";
import { createRoot } from "react-dom/client";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <ReactKeycloakProvider
    authClient={keycloak}
    initOptions={{
      onLoad: "check-sso",
      silentCheckSsoFallback: false,
      silentCheckSsoRedirectUri:
        window.location.origin + "/silent-check-sso.html",
    }}
  >
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ReactKeycloakProvider>
);

3. SSO login code
   src\pages\ssologincheck\index.jsx

import React, { useEffect } from 'react';
import { useHistory } from "react-router-dom";
import { Config } from "../../enums";
import { useKeycloak } from "@react-keycloak/web";

const SSOLoginCheckPage = props => {
   const history = useHistory();
    const { keycloak } = useKeycloak();
  useEffect(() => {
        if (keycloak?.authenticated) {
           //If authentication successful then setting user details and navigate to home page
            history.push("/home");
        }
        else {
           // If authentication not successful then we asked for login 
 history.push("/login");
        }
    }, [keycloak?.authenticated]);

    return (
        <> Please wait...</>
    );
}
export default SSOLoginCheckPage;

Sharing screenshot for references
Home page api calls going infinite times

Home page api calls going infinite times

After reloading page via SSO login through reactjs application it should not call Home page infinite time.