If I have 4 custom login buttons and I want to show the button used to last login on top, how can I do this?

I have 4 different login method for my app. Each method has a separate component associated to it. I want to rearrange the buttons based on what was the last used login method.

I already have a way to determine my last login.

  let lastSignedInMethodif (ticketsState?.mjrLoginType === 'apple') {    lastSignedInMethod = strings.tickets.login.apple} else if (ticketsState?.mjrLoginType === 'google') {    lastSignedInMethod = strings.tickets.login.google} else if (ticketsState?.mjrLoginType === 'phone') {    lastSignedInMethod = strings.tickets.login.yourPhoneNumber} else if(ticketsState?.mjrLoginType === 'username'){    lastSignedInMethod = strings.tickets.login.email}

I have the following 4 components.

<UsernameSignIn cta={hasSignedInAlready && lastSignedInMethod === strings.tickets.login.email} /><PhoneSignIn cta={hasSignedInAlready && lastSignedInMethod === strings.tickets.login.yourPhoneNumber} /><AppleSignIn     cta= {hasSignedInAlready && lastSignedInMethod === strings.tickets.login.apple}     setParentSigningIn={signingIn => setFreeze(signingIn)} /><GoogleSignIn      cta={hasSignedInAlready && lastSignedInMethod === strings.tickets.login.google }      setParentSigningIn={signingIn => setFreeze(signingIn)} />

I am render the 4 components with some dividers and some other styling but I want to rearrange them based on the value of lastSignedInMethod.You can ignore the cta property, I'm using this to color the button but It can be ignored for this functionality.

I am thinking of adding all the components to an array and then have some property on the component to be able to uniquely identify them using strings.tickets.login.apple string for the <AppleSignIn/> component and same for the others and then just sorting the array based on the value of lastSignedInMethod.

Is there a better way of doing this, or am I on the right path?