how i can access to object keycloak when i login with my own login page

I'm using keycloak with react js and , I'm using my own login page not login page of keycloak

import { useKeycloak } from '@react-keycloak/web';
import Keycloak from 'keycloak-js';
 const {keycloak , initialized} = useKeycloak();

the problem is when I try console.log(keycloak ) I found it empty this in the case i use my own login page , but when i login with the page login of keycloak I found it load

her is when i use keycloak login page

and her when i use my own page login