MUI Select dropdown menu custom color not applying

Question

I have a Select component and I want to change the background color of the dropdown menu. I tried with sx but the color stays unchanged.
But if in my global css file I put the same class, the color changes.
I don't want to add it to global css because I just need this specific Select component to change color.
I'd like to know why the color changes in the css file but not with the sx property ?
I tried to add !important to the color but it did not help.
My code :

<Select
    className="dark:text-primarylight"
    value={orderBy}
    onChange={handleOrderChange}
    IconComponent={() => <ChevronDown />}
    sx={{
        "& .MuiList-root": {
            backgroundColor: theme === "dark" && "#9A9A9A",
        },
    }}
>
    {alphabetical_filter.map((item) => {
        return (
            <MenuItem key={item.value} value={item.value}>
                {item.label}
            </MenuItem>
        );
    })}
</Select>

How can I change the dropdown background color ?