How to style a child element when its parent element is hovered on (js stylesheet)

I have a js style file with a notification component that has its own class. It contains a viewDot div with its own separate class in the same file that is present when the notification hasn’t been clicked on yet. The viewDot div is inside of the div that has the notificationStyle class.

I want to make it so that if I hover over the notification with a cursor, the color of the viewDot also changes. As it is below, the color of the viewDot only changes if I hover directly on the viewDot. Any tips on accomplishing the described behavior are greatly appreciated

const styles = theme => ({
    viewDot: {
        backgroundColor: '#00B8C4',
        '&:hover': {
            backgroundColor: '#F9D967',
        }
    },
    notificationStyle: {
        backgroundColor: '#FFFFFF',
        '&:hover': {
            backgroundColor: '#52B5C2',
        },
        // want to do something like this, but this is not correct as is
        '&hover.viewDot': {
            backgroundColor: '#F9D967'
        }
    },
});