I'm trying to put an overlay over Avatar component image, but I can't figure out how to extend the theme properly.

What I've tried so far:

import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  components: {
    Avatar: {
      parts: ['container', 'excessLabel', 'label']
      baseStyle: {
        excessLabel: {
          _before: {
           // overlay
          }
        }
      },
    },
  },
});

I tried to look at the theme source and figured it's a multipart component, but can't figure out how to target the src background image. And not sure about those parts either. Anyone, to enlighten me on how it should work?

https://chakra-ui.com/docs/media-and-icons/avatar