How to make the hover on the element applied to the children as well?

Question

css

Hello everyone
The problem is that when hovering on .top-menu__user .user-logout appears, but as soon as I remove the hover from .top-menu__user, .user-logout collapses. How can this be fixed?
Such code:

userHoverIn = () => {
    this.setState({
      onHoverUser: true
    })
  };
  userHoverOut = () => {
    this.setState({
      onHoverUser: false
    })
  };

return (
        <div
            onMouseOver={this.userHoverIn}
            onMouseOut={this.userHoverOut}
            className="top-menu__user">
          <img className="user-icon" src="/img/logo.jpg" alt=""/>
          <span>{user}</span>
          <Link className={this.state.onHoverUser ? "user-logout" : "user-logout hide"} to="/">
            <MdExitToApp className="icon"/>
            Logout
          </Link>
          <div className="icon"><MdArrowDropDown/></div>
        </div>
    );

.top-menu__user {
    display: flex;
    align-items: center;
    position: relative;
}

.user-logout {
  position: absolute;
  bottom: -25px;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: $orange;
  display: flex;
  &.hide {
    display: none;
  }
  .icon {
    font-size: 20px;
    margin-right: 5px;
  }
}

Answer 1

Do not rely on these events, they do not always work.
First of all, we need to get rid of the gap between the parent and child elements. The dropdown menu should have a position of top: 100% in a good way . To simulate a gap, you can use a container with padding .
Or maybe something like:

.user-logout {
  border-top: 5px solid transparent;
  background-clip: padding-box;
}

There are actually many ways.
The task itself is easier to solve through css , without an extra component prerender.