Transition Components not working after build on Gatsby

[joannerpena]

I'm having a problem when I use Transition. It works perfectly on my dev environment but after I build my app it stops working.

Here is the app deployed https://joannerpena-io-qrusl.ondigitalocean.app/

The items in the hero are supposed to transition in after the web loads.

Here is the code I'm using

// External Dependencies
import React, { Fragment } from "react"
import { Transition } from "@headlessui/react"

// Gatsby Dependencies
import { graphql, useStaticQuery } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

// Components
import Button from "./UI/Buttons/Button"

export default function Hero() {
  const data = useStaticQuery(graphql`
    query StorySet {
      file(relativePath: { eq: "Nerd-amico.png" }) {
        childImageSharp {
          gatsbyImageData(width: 700, placeholder: BLURRED, formats: WEBP)
        }
      }
    }
  `)
  const StorySet = getImage(data.file)

  return (
    <Fragment>
      <div className="container max-w-screen-2xl mx-auto px-3 sm:px-6 lg:px-16 py-16 flex flex-row justify-between items-center">
        <Transition
          show={true}
          appear={true}
          enter="transform transition duration-1000"
          enterFrom="opacity-0 -translate-x-10"
          enterTo="opacity-100 translate-x-0"
          className="text-black w-1/2"
        >
          <h1 className="font-proza text-5xl font-bold mb-2">Hello!</h1>
          <h1 className="font-proza text-5xl font-bold mb-5">
            <span className="font-proza font-normal italic">I’m</span> Joanner
            Pena
          </h1>
          <h3 className="font-open text-2xl font-semibold mb-5">
            Jr. Frontend Developer and Product Designer (UI/UX)
          </h3>
          <div className="text-lg font-open text-black w-4/5">
            <p className="mb-2">
              Majored in Computer Science on the Web Development Track. With
              more than 3 years of experience in Web Design. I specialize in
              UI/UX Design and Frontend Development with ReactJS and Responsive
              Design.
            </p>
            <p className="mb-4">
              I’ve been working as a Freelancer since the beginning of my major
              for companies over-seas as a Consultor or Contractor.
            </p>
          </div>
          <Button url="/about">Learn More</Button>
        </Transition>
        <Transition
          show={true}
          appear={true}
          enter="transform transition duration-1000"
          enterFrom="opacity-0 translate-x-10"
          enterTo="opacity-100 translate-x-0"
          className="flex justify-end w-1/2"
        >
          <GatsbyImage image={StorySet} alt="Illustration by StorySet" />
        </Transition>
      </div>
    </Fragment>
  )
}

Can anyone help me with this?