Set react element active - reactjs

Question

i'm trying to se an element active with a different color, but its not working.Someone could help me ? And if it works, probably every element will change the color, how could i do it with something like "this", or any other.
Thats my element and my state:
//-> my state: I used true as default because i was trying to do it works, but i failed
export default function VertNavigation() {
const [active, setActive] = useState(true);
console.tron.log(active);
return (
<Container>
<button type="button">DEPOSITAR</button>
<QuickNavi>
<VerticalNavigation>
<Title>ACESSO RÁPIDO</Title>
<li>
<Icon.MdMonetizationOn size={20} />
<p>Emitir Cobrança</p>
</li>
<li>
<Icon.GoGraph size={20} active={active} />
<p>Gestão de cobrança</p>
</li>
<li>
<Icon.MdCompareArrows size={20} />
<p>Tranferencia</p>
</li>
<li>
<Icon.FaBarcode size={20} />
<p>Pagamentos</p>
</li>
// -> my styled component -- its always in "else", i don't know why
export const VerticalNavigation = styled.ul`
width: 100%;
height: 100%;
li:nth-child(4)::after {
content: 'novo';
right: 0;
margin-left: 6px;
text-align: center;
font-size: 12px;
top: 10px;
width: 45px;
height: 15px;
background: #47b248;
color: #fff;
border-radius: 10px 10px 10px 10px;
}
li {
width: 100%;
height: 45px;
display: flex;
align-items: center;
cursor: pointer;
&:hover svg {
transform: translateY(-5px);
color: #47b248;
}
svg {
transition: 0.3s ease;
color: ${props => (props.active ? '#47B248' : '#939393')};
}
p {
padding-left: 15px;
font-size: 15px;
color: ${darken(0.5, '#A6A6A5')};
}
}
`;
Thank you in advance.

Answer 1

The problem was my Icon like the guys said. I had to create a li component and pass my prop for him, then it works.
Thank you everyone for help me.
->index.js
<Item active={active}>
<Icon.GoGraph size={20} />
<p>Gestão de cobrança</p>
</Item>
->styles
export const Item = styled.li`
width: 100%;
height: 45px;
display: flex;
align-items: center;
cursor: pointer;
svg {
transition: 0.3s ease;
color: ${props => (props.active ? '#47B248' : '#939393')};
}