How to style an outlined MuiTextField

Question

I am using this Library, I am a bit confused on how to style it. I am creating an outlined input field that changes border colour when hovered. I tried going the variants route by creating variants for my style like below:

declare module '@mui/material/TextField' {
  interface TextFieldPropsVariantOverrides {
    'pin-standard': true;
  }
}

MuiTextField: {
  styleOverrides: {
    root: {
      marginBottom: 8,
  },
  variants: [
    {
      props: { variant: 'pin-standard' },
      style: {
        backgroundColor: colors.wealthGreen,
        color: colors.ovWhite,
        width: '100%',
        ':hover': {
          backgroundColor: colors.wealthGreen,
        },
      },
    },
  ],
},

but it threw an error. Then I stumbled on this article that said variants cannot be used with TextField.

I tried using the Sx property, the issue with this is that on a TextField I can't use it to style the inner <input/> since MuiTextField is made up of two outer <div> that wraps the main

So I opted for the inputProps to style the input:

inputProps={{
  inputMode: 'numeric',
  size: 3,
  maxLength: 1,
  textAlign: 'center',
  style: {
    textAlign: 'center',
    backgroundColor: colors.neutral80,
    caretColor: colors.transparent,
  },
}}

but noticed that I cant add on :hover or :focused which makes it hard to get my desired effect of changing the border colour on hover.

Please what is the proper way to style a MuiTextField?