React Facebook Login popping up on page load - reactjs

Question

I have this code in React:
import React from 'react';
import { FACEBOOK_ID } from '../../../config/credentials';
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';
const responseFacebook = response => {
console.log(response);
};
const FacebookLoginButton = () => (
<div>
<FacebookLogin
appId={FACEBOOK_ID}
autoLoad
callback={responseFacebook}
render={renderProps => (
<button onClick={e => {
console.trace();
}
}>Login via FB</button>
)}
/>
</div>
);
export default FacebookLoginButton;
This is just a simple react facebook login, now my problem is when I reload my local development site, The facebook authorization always popup on load or when I am currently logged in, it automatically logins the user and returns to the console the information from Facebook. is that the normal behavior of this library? I am new to react so any comments would really be appreciated.
Edit:
I've researched a few videos like this one: https://www.youtube.com/watch?v=ea9KyE78qKI&t=10s
It seems like his facebook component popups too when he visit it on his local site at around 12:48 mark but got blocked because Chrome doesn't allow automatic popups.

Answer 1

Make autoLoad as false.
<FacebookLogin
appId={FACEBOOK_ID}
autoLoad={false}
callback={responseFacebook}
render={renderProps => (
<button onClick={e => {
console.trace();
}
}>Login via FB</button>
)}
/>

Answer 2

Just remove the autoLoad option will work fine.
By mentioning autoLoad will take autoLoad = true by default.
autoLoad = false or remove autoload will do the same thing.
Hope this will clear more.
const FacebookLoginButton = () => (
<div>
<FacebookLogin
appId={FACEBOOK_ID}
callback={responseFacebook}
render={renderProps => (
<button onClick={e => {
console.trace();
}
}>Login via FB</button>
)}
/>
</div>
);