[BUG] SVG morphTo results in "TypeError: $path1.getTotalLength is not a function"

[PapiPeppers]

I have a theme toggle button on my astro site that uses either a sun or a moon icon. I'd like to morph between the sun and moon on clicks, but I'm not sure if I'm doing so properly. Console error reads: TypeError: $path1.getTotalLength is not a function. (In '$path1.getTotalLength()', '$path1.getTotalLength' is undefined). Thanks!

<button
    id="theme-btn"
    title="Toggles light and dark theme"
    type="button"
    aria-label="Color mode toggle"
>
	<div class="icon"><Moon id="moon" /></div>
	<div class="icon"><Sun id="sun" /></div>
</button>

import { animate, utils, svg } from "animejs";

	const [ $button ] = utils.$("#theme-btn");
	const [ $sun ] = utils.$("#sun");
	const [ $moon ] = utils.$("#moon");

	const visibility = $sun.checkVisibility();

	function morphToMoon() {
		animate($sun, {
			d: svg.morphTo($moon),
			ease: "inOutCirc",
			duration: 500
		});
	};

	function morphToSun() {
		animate($moon, {
			d: svg.morphTo($sun),
			ease: "inOutCirc",
			duration: 500
		});
	};

	const morph = (visibility === true) ? morphToMoon : morphToSun;

	$button.addEventListener("click", morph);

Environment details

• OS: macOS
• Browser: Safari
• Version: 4.1.2