Fade transition not working on React Bootstrap Alert component

I have an alert which I display every time I load a page and the user can close the alert when ever he wants.

Now I want to add a closing transition to the alert but it doesn't seem to work.

I've tried a lot of things but still no transition effect on my alert.

Here is my code now:

function ReactTip(props){
    if(props.display){
        return(
            <Bs.Fade in={props.display}>
                <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
                </div>
            </Bs.Fade>
        );
    }
    return null;
}

Note that the value of props.display is true. What is wrong with my code?

Update #1: I tried this and the transition is working but the div is still there like the CSS display is set to hidden and not none.

return(
       <Bs.Fade in={props.display}>
           <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
           </div>
       </Bs.Fade>
);