Styling Fluent UI checkboxes within a dropdown

Question

I need to style a fluent UI checkbox using the style props. However based on the documentation it is unclear how to style the checkbox differently in its checked vs unchecked state. I am able to set the background color to black in the example below, but don't see any change in background color when an item is selected.

const dropdownStyles = {
dropdown: { 
    width: '300px',
    color: 'white',
    backgroundColor: '#333333',
    borderWidth: '1px',
    borderColor: 'black',
    borderStyle: 'solid',
},
title: {
    backgroundColor: '#333333',
    color: 'white'
},
dropdownItem: {
    backgroundColor: '#333333',
    color: 'white'
},
dropdownItemSelected: {
    backgroundColor: '#333333',
    color: 'white',
    '.ms-Checkbox-checkbox': {
        backgroundColor: 'red'
    }
},
dropdownItemDisabled: {
    backgroundColor: '#333333',
    color: 'gray'
},
dropdownItemHeader: {
    backgroundColor: '#333333',
    color: 'white'
},
dropdownItemsWrapper: {
    backgroundColor: '#333333'
},
dropdownOptionText: {
    color: 'white'
},
subComponentStyles: {
    multiSelectItem: {
        root: {
            selectors: {
                '.ms-Checkbox-checkmark': {
                    color: 'white',
                },
                '.ms-Checkbox-checkbox': {
                    borderColor: 'black',
                    backgroundColor: 'black',
                    '& .dropdownItemSelected': {
                        backgroundColor: 'yellow'
                    }
                }
            },
        }
    }
}
};

Results in below

Additionally, how would I be able to change the hover color to not be blue? Thank you