How to change icon colour when hovering on enclosing div container

I have a div that consists of a FontAwesome icon and some text. I'd like to keep the white colour of the icon and change it to green when the pointer is hovering on top of the root div. How can I do this?

The Component:

function GroceryItem({ title }) {
    return (
        <div className="root">
            <div className="row-content">
                <FontAwesomeIcon icon={faPlusSquare} className="add-icon"/>
                <p>{title}</p>  
            </div>
        </div>
    )
}

The styling:

.root {
  background-color: rgba(230, 230, 230);
  margin: 10px 0px;
}

.row-content {
  display: flex;
  padding: 15px;
}

.add-icon {
  color: whitesmoke;
}

I thought I'd be able to change colour of the icon if I set:

.root:hover {
  color: green
}

But doing this only changes the colour of the text, and not the colour of the icon.

Use a descendent selector, select all descendents.

.root:hover * {
  color: green
}