hide imported child component on hover using styled-components - reactjs

Question

Like the title says, this works with styled components sitting within the same js file (provided they are procedural-ordered above). But with imported child components I can't get it to work.
import React from "react";
import styled from "styled-components";
// Components
import Bars from "../path/Bars.js";
import BarsHover from "../path/BarsHover.js";
// Variables
import { colors } from "../../path/index.js";
//============================================ styles =============================================
const DivBars = styled(Bars)``;
const DivBarsHover = styled(BarsHover)``;
const DivWrapper = styled.div`
display: flex;
width: 20rem;
margin-bottom: 3rem;
&:hover {
cursor: pointer;
}
&:hover ${DivBars} {
display: none;
}
&:hover ${DivBarsHover} {
display: block;
}
`;
//=========================================== component ===========================================
const ParentComponent = props => {
return (
<DivContainer>
<DivBars fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.niagara} />
<DivBarsHover fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.gallery2} />
</DivContainer>
);
};
export default ParentComponent;

Answer 1

I think this caveat is the cause:
...wrapping A in a styled() factory makes it eligible for
interpolation -- just make sure the wrapped component passes along
className.
class A extends React.Component {
render() {
return <div className={this.props.className} />
}
}
const StyledA = styled(A)``
const B = styled.div`
${StyledA} {
}
`
NOTE: Ensure the className prop is propagated all the way to the component being referenced in the case that it isn't a direct descendent.