Detect click on outer component

Question

So this is my code:

export default ({user, showFriendsInvitations}) => {
    const handleBlur = () => {
        console.log('blur');
        setShowFriendInvitations(false);
    };
    const handleClick = () => {
        console.log(showFriendsInvitations)
        setShowFriendInvitations(!showFriendsInvitations);
    };

    const invites = user.friends.filter(f => f.accepted === false && f.blocked === true);
    return (
        <div className='inline iconBtnContainer'>
            {invites.length > 0 ?
                <div className='notificationContainer'>
                    <p>{invites.length}</p>
                </div>
                : null}

            <button className='iconBtn' onClick={handleClick}>
                 <CustomSvg/>
            </button>

            <div className='newInvitationFriendsDropdown' style={{background: 'yellow'}} onBlur={handleBlur}>
                {invites.length > 0 ?
                    <div className='newInvitationFriendsForm displayCenter'>
                        {invites.map(i => <div key={i}><FriendInvitationContainer invite={i}/></div>)}
                    </div> : <div className='newInvitationFriendsForm displayCenter'>Brak nowych zaproszeń</div>}
            </div>

            {showFriendsInvitations === true ? <FriendsInvitesContainer invites={invites}/> : null}
        </div>
    )
}

This is what it looks like:

What I want to achieve: When the user clicks anywhere outside of the yellow div, (className="newInvitationFriendsDropdown") I need the setShowFriendInvitations to be set to false. I tried doing this with handleBlur but it registers neither onBlur nor onFocus.

How can I make this work?