React Headless UI Spin Transition Night Theme Toggle - reactjs

Question

I've been trying to make a spin animation for my night and sun icon when toggled but I just can't figure it out. I'm using Nextjs, Tailwind, and Headless UI for the animation library. I feel like I'm close any help would be very much appreciated. Thx
This is what I have so far, all of the code pertaining to my question is in the handleThemeChange function:
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTheme } from 'next-themes';
import {
Brain,
MoonStars,
RocketLaunch,
PaperPlaneTilt,
Sun,
House,
Link as LinkIcon,
} from 'phosphor-react';
import { Transition } from '#headlessui/react';
const Navbar = () => {
const { systemTheme, theme, setTheme } = useTheme();
const [isShowingMoon, setIsShowingMoon] = useState(true);
const [mounted, setMount] = useState(false);
const [navStyles, setNavStyles] = useState(false);
const router = useRouter();
useEffect(() => {
setMount(true);
const handleNavStyles = () => {
if (window.scrollY > 45) {
setNavStyles(true);
} else {
setNavStyles(false);
}
};
window.addEventListener('scroll', handleNavStyles);
}, []);
const handleThemeChange = () => {
if (!mounted) return null;
const currentTheme = theme === 'system' ? systemTheme : theme;
if (currentTheme === 'dark') {
return (
<Transition
show={isShowingMoon === true}
enter="transform transition duration-[1000ms]"
enterFrom="opacity-0 rotate-[-120deg] scale-50"
enterTo="opacity-100 rotate-0 scale-100"
leave="transform duration-200 transition ease-in-out"
leaveFrom="opacity-100 rotate-0 scale-100 "
leaveTo="opacity-0 scale-95 "
>
<MoonStars
className="icon-style"
role="button"
onClick={() => {
setTheme('light');
setIsShowingMoon(false);
}}
/>
</Transition>
);
} else {
return (
<Transition
show={isShowingMoon === false}
enter="transform transition duration-[1000ms]"
enterFrom="opacity-0 rotate-[-120deg] scale-50"
enterTo="opacity-100 rotate-0 scale-100"
leave="transform duration-200 transition ease-in-out"
leaveFrom="opacity-100 rotate-0 scale-100 "
leaveTo="opacity-0 scale-95 "
>
<Sun
className="icon-style"
role="button"
onClick={() => {
setTheme('dark');
setIsShowingMoon(true);
}}
/>
</Transition>
);
}
};
return (
<header className="sticky top-0 z-10 backdrop-blur-md">
<nav
className={`container flex items-center justify-between space-x-3 py-3 sm:py-5 ${
navStyles ? 'border-color border-b' : ''
}`}
>
<Link href={'/'} aria-label="Home Page">
<House
className={`icon-style cursor-pointer ${
router.pathname === '/' ? 'highlight' : ''
}`}
/>
</Link>
<Link href={'/projects'} aria-label="Projects">
<RocketLaunch
className={`icon-style cursor-pointer ${
router.pathname === '/projects' ||
router.pathname === '/projects/[id]'
? 'highlight'
: ''
}`}
/>
</Link>
<Link href={'/skills'} aria-label="Skills">
<Brain
className={`icon-style cursor-pointer ${
router.pathname === '/skills' ? 'highlight' : ''
}`}
/>
</Link>
<Link href={'/links'} aria-label="Links">
<LinkIcon
className={`icon-style cursor-pointer ${
router.pathname === '/links' ? 'highlight' : ''
}`}
/>
</Link>
<a href="mailto:xilaluna2#gmail.com" aria-label="Send Email">
<PaperPlaneTilt className="icon-style" />
</a>
{handleThemeChange()}
</nav>
</header>
);
};
export default Navbar;