Navbar hover dropdown with atomic design & styled & react.js

Question

if navbar hover, i want show dropdown menu I'd like to change display: none of the components created in another file to display:block.

Menu.jsx

const Container = styled.div`
  display: none;
  width: 106px;
  height: 36px;
  backgroud-color: black;
  top: 10px;
  left: 20px;
`;

const Menu = () => {
  return <Container></Container>;
};

export default Menu;

Header.jsx

const Item = styled.li`
  position: relative;
  width: auto;
  list-style: none;
  padding: 1rem;

  &:hover,
  &:focus {
    color: #57c5c4;
  }

  &:active {
    color: #04a3ca;
  }
`;

${(<Menu></Menu>)}:hover & {
    display: block;
  }

add Header.jsx

but not working