Fluenui white dropdown color CSS - reactjs

Question

Hello I am trying to configure my dropdown using Fluent ui. But I am unable to achieve current vs expected result.
How do you I configure in order to have a black background when drop down. At the moment my drop-down background is standard white and text normal.
Current:
Expected Result:
My code:
import { Dropdown } from '#fluentui/react/lib/Dropdown';
Inline styling:
const dropdownStyles = (styleProps) => {
const chkStyles = {
title: [{
borderRadius: "5px",
backgroundColor: "transparent",
borderColor: "white",
height: "50px",
width: "100%",
fontSize: 16,
color: "white",
lineHeight: "45px",
}],
dropdown: [{
color: "white",
fontSize: 16,
"&:hover .ms-Dropdown-titleIsPlaceHolder": {
backgroundColor: "transparent",
color: "white",
},
"&:hover .ms-Dropdown-title": {
color: "white",
backgroundColor: "transparent",
borderColor: "white",
},
"&:focus .ms-Dropdown-title": {
color: "white",
},
"&:active .ms-Dropdown-titleIsPlaceHolder": {
color: "white",
},
"&:focus .ms-Dropdown-titleIsPlaceHolder": {
color: "white",
},
}],
"caretDown": {
paddingTop: "10px",
color: "white !important",
},
};
return chkStyles
};
Dropdown:
<Dropdown
componentRef={dropdownRef}
placeholder="Choose a category"
aria-label="choose a category"
title="choose a category"
aria-required="true"
onChange={handleCategory}
value={category}
options={categoryoptions}
calloutProps={{ directionalHintFixed: true }}
styles={dropdownStyles}
type='text'
errorMessage={validationErrors.category ? "Category is required" : undefined}
/>