How to completely animate pathLength of svg to 0 in framer-motion?

I am trying to animate a svg path to disappear on click. The animation works, but at the end of the animation a dot is left behind.

Here is my code

export default function App() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <button type="button" onClick={() => setShowPassword((prev) => !prev)}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="#000"
        strokeWidth="1.5"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
        />
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
        />
        <motion.path
          initial={{ pathLength: 1, opacity: 1 }}
          animate={{ pathLength: showPassword ? 0 : 1 }}
          exit={{ pathLength: 1 }}
          transition={{ duration: 0.2, ease: "easeInOut" }}
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M3 3L21 21"
        />
      </svg>
    </button>
  );
}

Codesandbox link

I am expecting the animation to completely remove the svg path.