Chakra UI cannot customize PopoverContent component in global theme?

Not sure why theme customization does not work with PopoverContent, it works fine with Button though:

Index.jsx:

export const theme = extendTheme({
  components: {
    PopoverContent: {
      baseStyle: {
        bgColor: "black" // <- doesn't work ???
      }
    },
    Button: {
      baseStyle: {
        color: "blue" // <- works for Button component
      }
    }
  }
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  rootElement
);

App.jsx:

export default function App() {
  return (
    <Box height="100vh">
      <Popover>
        <PopoverTrigger>
          <Button>show popover content</Button>
        </PopoverTrigger>

        <PopoverContent
        // bgColor="green" // <- manually adding attribute works
        >
          <PopoverBody>Hello</PopoverBody>
        </PopoverContent>
      </Popover>
    </Box>
  );
}

And change it to Popover still doesn't work. How to make this work? Customize every single one in all of my components is pain in the butt.

Please take a look at Sandbox.