useTransition Custom Component

[MikeAlvarado]

Hi! We are implementing react-spring on a project.

The way we are doing things is we have a component called FormPage that is displayed on a view Pet

The way it works atm is Pet with a switch case, renders different FormPage

e.g.

pet.jsx

export default function Pet(props) {
  function formStep(step) {
    switch (step) {
      case "1":
        return <FormPage
        ...
        />
      case "2":
      return <FormPage
        ...
        />
      ...
    }
  }

  ...

  return(
    formStep(step)
  )
}

I have a doubt on which is the best way to implement a simple transition like here without using a map. (?)

My thoughts were either always animate FormPage or implement useTransition on a switch ase, case as shown here (the problem is that Transition is deprecated).

formPage is a helper view that renders child components passed on pet.

The approach I tried was to animate the whole component, but it wasn't working.
formPage is structured like this:

formPage.jsx
export default function FormPage(props) {
  ...

  return(
  <div>
    ...
  </div>
  )
}

Thanks in advance!

Edits: Typos and redaction.