I'm trying to get a fade-in transition for a div named "taskIcons". It holds a number of icons and I would like to slowly fade in from the right when I onMouseEnter over my title div.

Instead of using the built-in CSS :hover and tying it to the classname "task-title". I've used the React useState hook to change the className of my HTML element. Here is a copy of snippets of the code:

JSX:

const [hover, setHover] = useState(false)

function handleHover() {
    setHover(!hover)
    console.log(hover)
}

    return (
    <div className='task-item' >
        <div className='task-header'>
            <h3 className='task-element task-title' 
            onMouseEnter={handleHover} 
            onMouseLeave={handleHover}
            >{title}</h3>
            <div className='fade-out'></div>
            <div name="taskIcons" className={hover ? 'task-icons ' : ' invisible-icons'}>
                <FaSun className='task-icon' onClick={moveTomorrow} />
                {/* Placeholder for "Move to tomorrow" icon */}
                <FaCalendar className='task-delete task-icon' onClick={toggleCalendar}/>
                <FaEdit className='task-edit task-icon' onClick={editTask} />
                {/* Edit Task */}
                <FaTimes className='task-delete task-icon' onClick={deleteTask} />
                {/* Delete */}
            </div>
        </div>
        <div className='task-body'>
            <p className='task-element'>{parseBody()}</p>
            {buckets.map((bucket, index) => (
                    <span className='task-bucket task-element'key={index}>#{bucket}</span>
                ))}
        </div>
        <span>   
            {dueDate}
        </span>
        {calendar ? <Schedule/> : null}
    </div>
)

CSS:

    margin: 0px 0px 0px 10px;
    align-self: flex-start;
    text-align: left;
  }
  .task-header{
    display: flex;
    flex-direction: row;
  }
  .task-title{
    margin-right: auto;
    overflow-x: hidden;
    cursor: pointer;
  }
  .task-body {
    display: flex;
    flex-direction: column;
  }
  .invisible-icons {
    display: none;
  }
  .task-icons {
    display: flex;
    white-space: nowrap;
    margin-top: 4px;
    transition: 1s;
  }
  .task-icon {
    margin-left: 4px;
    margin-right:  4px;
  }