This is my current datepicker.

I want to add the box-shadow when I the textfield is focus like below

I tried to add it using makeStyles but not working

demo.js

import "date-fns";
import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker
} from "@material-ui/pickers";

import { makeStyles } from "@material-ui/core/styles";

export const styles = makeStyles(() => ({
  root: {
    marginTop: 0,
    "& .MuiInputBase-root": {
      border: "1px solid grey",
      borderRadius: "0.25rem",
      padding: "0.375rem 0.75rem",
      "&:focus": { //added here
        borderColor: "#86b7f",
        boxShadow: "0 0 0 0.25rem red"
      },
      "&:before": {
        borderBottom: "none"
      },
      "&:after": {
        borderBottom: "none"
      },
      "&:hover:hover:not(.Mui-disabled):before": {
        borderBottom: "none"
      },
      "& .MuiButtonBase-root": {
        padding: 0
      }
    }
  }
}));

export default function MaterialUIPickers() {
  const classes = styles();
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardTimePicker
          margin="normal"
          id="time-picker"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change time"
          }}
          className={classes.root}
        />
      </MuiPickersUtilsProvider>
    </>
  );
}

CodeSandbox:
https://codesandbox.io/s/material-demo-forked-b6z4b?file=/demo.js:0-1460