How to change a svg image along with text with hover in CSS - html

Question

I tried to change my svg image and text on hover and it doesn't work how I want it. I want the moment my mouse crosses over any of these 2 (svg or text) to change both.
Maybe I made a mistake in the html structure or maybe in css.
Please if you can help me, thanks in advance.
.logout-image {
mask: url("../../../assets/images/log-out.svg");
background-color: #62799D;
width: 20px;
height: 20px;
margin-right: 20px;
margin-left: 20px;
}
.logout-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 0px 8px 24px;
width: 100%;
height: 60px;
position: static;
left: 0px;
top: 280px;
color: #62799d;
margin-top: 35vh;
}
.logout-container:hover {
background: #0c2e6e;
color: white;
}
.logout-image:hover{
background: white;
}
<ul className="SidebarList">
{sidebarData.map((value, key) => {
return (
<li
className="row"
key={key}
onClick={() => {
window.location.pathname = value.link;
}}
>
{" "}
<div className="icon">{value.icon}</div>{" "}
<div className="title">{value.title}</div>
</li>
);
})}
{" "}
{" "}
//here is the problem
<li className='logout-container'>
<div className="logout-image"></div>
<div className="title" >Logo Out</div>
</li>
//until here
</ul>
This is how I wanted to change with hover:
target result
And this is how it is working right now:
current result
The background changes only if I cross over my svg image:
example here

Answer 1

Add this:
.logout-container:hover > .logout-image{
background: white;
}
It turns the image and words white when logout-container is hovered.