Fluenui white dropdown color CSS

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}
/>