Стилизованные компоненты: как применять стили при наведении курсора на родительский компонент (разные файлы компонентов)

Question

Новое в мире React и Styled Components, извините, если это очень просто!

У меня есть 2 компонента, кнопка и значок.

Первоначально они были в том же самомфайл jsx и я смог добиться того, что хотел.Тем не менее, после их разделения мне трудно вернуть его в нормальное состояние.

Вот мой код, я упростил его и удалил ненужный код.

*Файл 1 - button.jsx *

import Icon from '@sd-component/icon';

class ButtonComponent extends React.Component {
    render() {
        return (
            <Button>
                <Icon />
            </Button>
        );
    }
}

* Файл 2 - icon.jsx *

const Icon= styled.i`
    background-color: red

    &:hover,
    ${Button}:hover & { // This line used to work when they were in the same file
        background-color: green;
    }
`


class Component extends React.Component {
    render() {
        return <Icon />;
    }
}

Поэтому, когда я наведите курсор на кнопку,Я хочу, чтобы цвет фона значка изменился.Когда они были в одном и том же jsx-файле, я смог добавить этот ${Button}:hover & к своему &:hover, и он будет работать нормально.Теперь я не уверен, как этого добиться, поскольку CSS для моей иконки находится в icon.jsx, а CSS для кнопки - в соответствующем файле.

Любая помощь будет отличной!Спасибо!