Change the border color of Material UI Autocomplete on hover

I'm trying to change the border color of the Autocomplete on hover, the default is black. I already tried to override the .MuiAutocomplete-root class:

.MuiAutocomplete-root fieldset:hover{
    border-color: #2196F3;
}

But it still black

Here's an example:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994, },
  { title: "The Godfather", year: 1972, },
  { title: "Avatar", year: 2010, },
  // Plus a bunch more
];

CSS

.MuiAutocomplete-root div:first-of-type:hover{
    border-color: #2196F3;
}