React Headless UI Spin Transition Night Theme Toggle

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;