How can I overwrite styles of an autofilled input when using Chakra UI?

Just incase anyone has the same issue, I couldn't figure out how to override the default browser background-color, so instead I gave it a box-shadow value that creates a similar effect. Box-shadow is not set by the browser's autofill styles so this works well for my case.

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              bg: "gray.500",
            },
            _autofill: {
              border: "1px solid transparent",
              textFillColor: "#c6c6c6",
              boxShadow: "0 0 0px 1000px #232323 inset",
              transition: "background-color 5000s ease-in-out 0s",
            },
         }
      }
    }
  }
})