Change color of the IconComponent of Material UI's Select Component

For my project, I'm using MUI's Select Component with the LanguageIcon as the IconComponent.
What I'm trying to do is turn this icon white (it's black per default), but I can't get it to work.

I tried to follow this solution, but it won't work for me.
import { makeStyles } from '@mui/styles'; throws "Module not found: Can't resolve '@mui/styles'" and on their website it says @mui/styles is deprecated.

This is what I currently have:

import * as React from 'react';
import { FunctionComponent } from 'react';
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, {SelectChangeEvent} from "@mui/material/Select";
import { useRouter } from 'next/dist/client/router';
import LanguageIcon from '@mui/icons-material/Language';

const LocaleSelect: FunctionComponent = () => {

  const router = useRouter()
  const {locale, locales, pathname, asPath, query} = router;

  const handleLocaleChange = (event: SelectChangeEvent<string>) => {
    router.push({ pathname, query }, asPath, { locale: event.target.value})
  }

  return(
    <FormControl
      variant='standard'
      sx={{ m: 1, maxWidth: 32 }}
      color="primary" >
        
      <Select
        disableUnderline
        labelId="demo-simple-select-autowidth-label"
        id="demo-simple-select-autowidth"
        value={locale?.toLocaleUpperCase()}
        onChange={handleLocaleChange}
        autoWidth
        IconComponent={LanguageIcon} >
        {locales?.map((l) => {
          return <MenuItem key={l} value={l}>
            {l.toLocaleUpperCase()}</MenuItem>;
        })}
      </Select>
    </FormControl>
  )
}

export default LocaleSelect

This makes it look like this.

I managed to make the globe white by using

IconComponent={() => <LanguageIcon htmlColor='white'/>}

but that moves the globe to the right.

Any help would be fantastic; either by making the globe white or by moving it to the left.