How to add transition effect on group hover with tailwind css?

I am trying to make an animated transition effect on my button so that when the user hovers, it displays a chevron. I'm building the site in NextJS and using TailwindCSS and I have a group hover so that when the user hovers over the button, it makes the chevron visible. It all works, except so the transition effect doesn't work. the chevron is appearing instantly, however, I want a slight transition duration so that it appears smoothly.

Below is the code I'm using, if anyone can help I would be very grateful.

<a
	href={url}
    className="ease-out duration-300 transition-all group inline-block rounded-xl bg-accent2 px-4 py-2 text-white font-bold hover:bg-accent1 hover:text-black"  
>
    <span className="flex items-center gap-2">
        <span>{text}</span>
        <IconChevronRight className="ease-out duration-300 transition-all hidden group-hover:block"/>
    </span>
</a>

hidden applies display: none. Unfortunately, one cannot transition on the same frame that display: none is removed/add. Instead, you could consider applying opacity for a fade effect:

<!-- begin snippet: js hide: false console: false babel: true -->

<!-- language: lang-js -->

function IconChevronRight({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="red"
      className={`w-6 h-6 ${className}`}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
  );
}

function App({ url, text }) {
  return (
    <a
      href={url}
      className="ease-out duration-300 transition-all group inline-block rounded-xl bg-accent2 px-4 py-2 text-white font-bold hover:bg-accent1 hover:text-black"  
    >
      <span className="flex items-center gap-2">
        <span>{text}</span>
        <IconChevronRight className="ease-out duration-300 transition-all opacity-0 group-hover:opacity-100"/>
      </span>
    </a>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<App url="" text="Foo"/>);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div id="app" class="bg-slate-500"></div>

<!-- end snippet -->