Trans component doesn't seem to work in this example

[phxgg]

So this is the code that I have

{
  "sign-up-modal-message": "or <0><1>Sign Up</1></0> if you do not have an account."
}

<Trans
  i18nKey='common:sign-up-modal-message'
  components={[<Link href='/auth/sign-up' />, <a className='font-medium text-primary hover:text-primary-focus' />]}
/>

This is the error thrown at me: Error: Multiple children were passed to <Link> withhrefof/auth/sign-upbut only one child is supported https://nextjs.org/docs/messages/link-multiple-children

I've tried this as well but same error is thrown.

{
  "sign-up-modal-message": "or <link><a>Sign Up</a></link> if you do not have an account."
}

<Trans
  i18nKey='common:sign-up-modal-message'
  components={{ link: <Link href='/auth/sign-up' />, a: <a className='font-medium text-primary hover:text-primary-focus' />}}
/>

It works fine as a link if I only pass <Link /> in the components prop but obviously I cannot style my link.

[phxgg]

Jesus I'm an idiot for posting this in the wrong repo. Please delete this. lol