State change does not cause autosuggest to rerender

[adongu]

Hello, I have an autosuggest implementation that would show a search product and user review information on the right side of the suggestion. I want to be able to hover over the user image and trigger a class change in headersearch__hovernamebox component. I can detect the change in the console when I console log state change from hover event. However, I do not see the class name updating from the state change. I do have the css for

.headersearch__hovernamebox.active {
display: inline-block;
}

The name component does show up when I took out ternary inside .headersearch__hovernamebox className. and just added active to it.

I expect the hover effect to be triggering a state change and then a re-render to the autosuggest component, but nothing was changing. I do not know if this is a bug or is beyond the scope of the autosuggest component. Any suggestions would be welcome.

return (
              <div key={`headersearch-${perview.id}`}>

                <div className="headersearch__userbox">
//Triggers state change from mouse events
                  <img
                    onMouseOver={() => { this.setState({ hoverUserName: perview.userDto.fullName}) }}
                    onMouseLeave={() => { this.setState({ hoverUserName: "" }) }}
                    className="headersearch__userimg-img"
                    src={user.facebookProfilePictureUrl.replace(/\/picture$/, "")}
                    alt={user.fullName}/>
                </div>

//state change will allow username matching to display in respect to the state hoverUserName

                <div className={`headersearch__hovernamebox ${ this.state.hoverUserName === user.fullName ? 'active': ''}`}>
                  <div className="headersearch__hovernamebox-triangle"></div>
                  <div className="headersearch__hovernamebox-name">
                    {user.fullName}
                  </div>
                </div>
              </div>
            )