Can't Override Ant Design Vertical Submenu Background color

Question

So, i'm trying to override Antd Menu Vertical mode colors on React, using only Styled-Components.

https://i.stack.imgur.com/MYC0O.jpg

You can see in the image that i overrided the menu background, but the submenu-pop-up(when hover mouse on a item) is still white and i need to be black.

https://i.stack.imgur.com/pFxzR.jpg

But when i try to override that class (.ant-menu-submenu-popup > .ant-menu), it does nothing, even with important.

I can use only use Styled-Components to make the adjustments. Any suggestions?

styles.tsx

import styled from 'styled-components'
import * as I from './ISideMenu'
import { Menu as AntdMenu } from 'antd'

const BaseMenu = styled(AntdMenu)<I.StyledMenu>`
  background-color: ${(p) => p.$menuBackgroundColor} !important;
  color: ${(p) => p.color};
  width: ${(p) => p.width};

  .ant-menu-submenu-popup > .ant-menu{
    background-color:black !important; //<---DOES NOTHING!
    }

  .ant-menu-submenu-title,
  .ant-menu-submenu-arrow {
    color: ${(p) => p.color};

    &:hover {
      color: ${(p) => p.$hoverColor};
      .ant-menu-submenu-arrow::before,
      .ant-menu-submenu-arrow::after {
        color: ${(p) => p.$hoverColor};
      }
    }
    &:active {
      background-color: transparent;
    }
  }

  .ant-menu-item,
  .ant-menu-item-selected {
    color: ${(p) => p.color};
    &:hover {
      color: ${(p) => p.$hoverColor};
    }
    &:active {
      color: ${(p) => p.$hoverColor};
      background-color: transparent;
    }
  }
`

export const VerticalMenu = styled(BaseMenu)<I.StyledMenu>`


`

export const InlineMenu = styled(BaseMenu)<I.StyledMenu>`
  height: 100vh;

  .ant-menu-horizontal,
  .ant-menu-item::after,
  .ant-menu-submenu::after {
    border: none;
  }

  .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
    color: ${(p) => p.$hoverColor};
  }

  .ant-menu-item-selected {
    color: ${(p) => p.$hoverColor};
    background-color: transparent !important;
  }

  .ant-menu-sub {
    background-color: ${(p) => p.$menuBackgroundColor} !important;
  }
`

export const SubMenu = styled(AntdMenu.SubMenu)``

export const MenuItem = styled(AntdMenu.Item)`

`

index.tsx

import { useState } from 'react'
import { Input, Button } from 'antd'
import * as S from './styles'
import * as I from './ISideMenu'

export default function Sidemenu(props: I.Menu) {
  const [menuFilter, setMenuFilter] = useState<I.MenuItem[]>(props.menu)
  const [searchValue, setSearchValue] = useState<string>('')

  const Menu = props.menuMode === 'inline' ? S.InlineMenu : S.VerticalMenu

  function onChangeInput(value: string) {
    setSearchValue(value)
    setMenuFilter(filterMenu(value.toLowerCase(), props.menu))
  }

  function onCleanInput() {
    setSearchValue('')
    setMenuFilter(props.menu)
  }

  function filterMenu(searchValue: string, arr?: I.MenuItem[]) {
    const matches: I.MenuItem[] = []

    if (!arr) return matches

    arr.forEach((item) => {
      if (item.title.toLowerCase().includes(searchValue)) matches.push(item)
      else {
        let submenuResults = filterMenu(searchValue, item.submenu)
        if (submenuResults?.length)
          matches.push(Object.assign({}, item, { submenu: submenuResults }))
      }
    })
    return matches
  }

  function renderSubmenu(item: I.MenuItem, menuIndex: number) {
    if (item.submenu)
      return (
        <S.SubMenu
          key={`${item.title}-SubmenuItem_${menuIndex}`}
          title={item.title}
        >
          {item.submenu.map((submenuItem) =>
            renderSubmenu(submenuItem, menuIndex)
          )}
        </S.SubMenu>
      )
    else {
      return (
        <S.MenuItem
          key={`${item.title}-MenuItem_${menuIndex}`}
          title={item.title}
          onClick={item.onPress}

        >
          {item.title}
        </S.MenuItem>
      )
    }
  }

  return (
    <>
      <Menu
        width={props.width}
        color={props.color}
        $menuBackgroundColor={props.menuBackgroundColor}
        $hoverColor={props.hoverColor}
        mode={props.menuMode}
      >
        {props.hasSearch && (
          <Input
            onChange={(e) => onChangeInput(e.target.value)}
            placeholder={'Buscar em menu'}
            value={searchValue}
            style={{ width: props.width }}
            suffix={
              <Button onClick={() => onCleanInput()} type={'text'}>
                x
              </Button>
            }
          />
        )}
        {menuFilter.map((item: I.MenuItem, index: number) =>
          renderSubmenu(item, index)
        )}
      </Menu>
    </>
  )
}