प्रतिक्रिया मैं मँडराते समय svg स्ट्रोक का रंग बदलना चाहता हूँ

मैं प्रतिक्रिया और स्टाइल-घटकों का उपयोग कर रहा हूं।
जब आइटम होवर किया जाता है तो मैं आइकन के स्ट्रोक रंग को काले रंग में बदलना चाहता हूं।
जब आइटम पर क्लिक किया जाता है, तो यह काला होता है, लेकिन जब इसे होवर किया जाता है, तो यह नहीं होता है।

कोड

import "./styles.css";
import styled from "styled-components";
import { Folder } from "./Folder";
import React, { useState } from "react";

const Item = styled.div<{ active?: boolean }>`
  height: 40px;
  width: 100%;
  padding: 0px 30px;

  &:hover {
    background: #fafbfb;
    path {
      stroke {
        fill: "#000000";
      }
    }
  }

  path {
    stroke: ${({ active }) => (active ? "#000000" : "#BDC4CB")};
  }
`;

export const App = () => {
  const [click, setClick] = useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Item active={click} onClick={() => setClick(!click)}>
        <Folder />
      </Item>
    </div>
  );
};
export default App;