Expense Chart Component using React

Hi all,

Another Junior Challenge complete! I'm getting the hang of updating components using React's useState, but have some questions regarding readability. For example, one element had multiple classNames, inline styles, and events so it was extremely long:

<div onMouseEnter={() => {handleHover(); handleSelect(report)}} onMouseLeave={handleLeave} style={{opacity: selected === report ? 0.75 : 1}} className="bar-area col-center">

Are there any best practices on breaking this up? Or is it good the way it is? Thanks!

-Tyler