I am working at a project, in React, class components, which is like this:
A navbar with a dropdown and <section> with more cards. When the dropdown it is open the <section> has a background color which is on top of all other elements. To close the dropdown, you click outside of it.
onMouseEnter each card, more data is displayed(display:none to display:flex), and onMouseLeave each card, the data is hidden (display:flex to dispaly:none).
The problem is that, if the mouse pointer it is on a card, after the dropdown closes, the extra data stays hidden.
This is the <div> which is making troubles:

 <div
    className={
      bla.type === "blla"
      ? "flex"
      : bla.type !== "blla" &&
      this.props.showOtherAttr === false
      ? "hidden"
      : "flex"
       }>

And this is a fragment of the parrent component:

class Article extends Component {
  state = {
    showOtherAttr: false,
    isFocused: false
  };

  render() {
    
    const dispalyOtherAttr = () => {
      if (this.state.showOtherAttr === false) {
        this.setState({
          showOtherAttr: true         
        });
      } else if (this.state.isFocused === true){
        this.setState({
          showOtherAttr: true
        })
      }
    };

    const hideOtherAttr = () => {
        if (this.state.showOtherAttr === true) {
          this.setState({
            showOtherAttr: false,
          });
        }
      }

    const handleFocus = () => {
      this.setState({
        isFocused: true
      })
    }
    return (
      <div
        className="card"
        onMouseEnter={(e) => {
          dispalyOtherAttr();
          this.props.reduxAction
        }}
        onFocus = {()=>handleFocus()}
        onMouseLeave={()=>{hideOtherAttr(); this.props.resetStateReduxAction()}
      >
       <ComponentWithDiv
            showOtherAttr={this.state.showOtherAttr}>
 </div>
    );
  }
}

export default Article

I tried to use onFocus event on card's outer <div> but nothing.
I tried to override CSS class .hidden{display: none} like this:

.card:focus div.hidden {
 display: flex
}

and like this:

.card:focus:nth-child(3){
  display: flex;
}

I searched in react synthetic events, but there is nothing like "mouseAlreadyHere".
How to make it to display extra data and to call this.props.reduxAction, after I close the dropdown and the mouse it is inside the card?
Thank you very much!