I’ve got an SVG for which I have this CSS

div > svg {
  color: black;
  filter: drop-shadow(0px 0px 6px red);
}

and on hover I have this CSS

div:hover > svg {
  color: transparent;
}

What I need is for the SVG to disappear but the drop shadow to remain on hover. What I’m getting is both the SVG and the drop shadow disappearing.

THE HTML looks like this

  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <g id="ico">
      <path fill="currentColor"
        d="M20.3..." />
    </g>
  </svg>

  <div>
    <svg style="background-color: transparent;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button">
      <title>A title here</title>
      <use href="#ico"></use>
    </svg>
  </div>

How can I change my CSS to get what I need?