React mapStateToProps return null redux's user state object at the first time when reload page although signed in with firebase

Question

I am doing a firebase login function with (Redux, NextJS, Firebase) and I am stucking with connect(mapStateToProps, mapDispatchToProps). At my navbar, I want to hide sign-in button after logging in. Yes, the button is hidden but only after the page is fully loaded. I mean when reloading the page, firstly, the sign in button is still there for a few milliseconds then it disappears and the sign-out button appear. T also tried to console.log(props.user). It return 2 times for one page reload. First time return null object and the second return firebase user object with full information. My code here for navbar:

import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { HEADER_ITEMS } from './HeaderItems';
import { useRouter } from 'next/router';
import { connect } from 'react-redux';
import { signOutAPI } from '../../actions';

function Navigationbar(props) {
  const router = useRouter()
    return (
        <>
          {['xl'].map((expand) => (
            <Navbar key={expand} bg="light" expand={expand} className="mb-3">
              <Container fluid>
                <Navbar.Brand className='ms-5' href="/">Navbar</Navbar.Brand>
                <Navbar.Offcanvas
                  id={`offcanvasNavbar-expand-${expand}`}
                  aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
                  placement="end"
                >
                  <Offcanvas.Header closeButton>
                    <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
                      Offcanvas
                    </Offcanvas.Title>
                  </Offcanvas.Header>
                  <Offcanvas.Body>
                    <Nav>
                    {props.user == null ? 
                      <div className='me-5'>
                          <Button href="/customer/login" className='btn-outline-primary btn-light rounded-pill me-3' passHref>SIGN IN</Button>
                          <Button href="/customer/create" className='rounded-pill' passHref>SIGN UP</Button>
                      </div> : 
                      <div className='me-5'>
                          <Button onClick={() => props.signOut()} className='rounded-pill'>SIGN OUT</Button>
                      </div>
                    }
                    </Nav>
                  </Offcanvas.Body>
                </Navbar.Offcanvas>
                <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
              </Container>
            </Navbar>
          ))}
        </>
      );
}

const mapStateToProps = (state) => {
  return { user: state.userState.user };
}

const mapDispatchToProps = (dispatch) => ({
  signOut: () => dispatch(signOutAPI()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Navigationbar);

I wonder if the state can be loaded properly at first time instead of return null? Thank you so much!