How to use Translation outside a React component?

Hi, I’m trying to add translation to a object that is outside a React Component, is this possible?

Current code

import React from 'react'
import { useTranslation } from 'react-i18next'
import { Dimmer, Loader, Segment, Item } from 'semantic-ui-react'
import i18next from 'i18next';

// Images
import BankidImage from '../../../assets/img/bankid-logo.png' // Images
import SwishImage from '../../../assets/img/swish.webp' // Images

const webdata = {
  bankid: {
    image: BankidImage,
    textStarted: i18next.t('DimmerBankid.text'),
    textComplete: i18next.t('DimmerBankid.complete')
  },
  swish: {
    image: SwishImage,
    textStarted:
      'Öppna Swish-appen för att slutföra transaktionen. Kontrollera belopp, mottagare och acceptera betalningen. Klart!',
    textComplete: 'Betalning är genomförd. Tack!'
  }
}

export function DimmerLoading({ active, type, action }) {
  return (
    <Dimmer active={active} inverted>
      <Loader inverted>
        <Segment>
          <Item.Group>
            <Item>
              <Item.Image size="tiny" src={webdata[type].image} />
              <Item.Content verticalAlign="middle">
                {action ? webdata[type].textComplete : webdata[type].textStarted}
              </Item.Content>
            </Item>
          </Item.Group>
        </Segment>
      </Loader>
    </Dimmer>
  )
}