При наведение на один компонента поменять стиль другого

Использую реакт, есть кастомный тэг. При наведении на блок, нужно поменять фон у другого блока, который лежит в этом же блоке. Первый файл:

<div className='card'>
    <First className='first' />  
        {widget()}
</div>

Файл с тэгом First:

const HeaderWidget = () => {
  return (
    <div>  
      <Second color='blue' className='second' />
    </div>
  );
};

const Second= ({color}) => {
   return (
       <div style={{backgroundColor: color} className='three'} >
            <button>Button</button>
       </div>
   );
}

css файл:

.card:hover . first .second .three{
    background-color: red;
}

Но этот способ не работает, цвет не меняется