How to use the react-i18next.useTranslation function in react-i18next

export default function AddLiquidity({ params }) {
  const { t } = useTranslation()
  const { library, account, active } = useWeb3React()

  // clear url of query
  useEffect(() => {
    const history = createBrowserHistory()
    history.push(window.location.pathname + '')
  }, [])

  const [addLiquidityState, dispatchAddLiquidityState] = useReducer(
    addLiquidityStateReducer,
    { ethAmountURL: params.ethAmount, tokenAmountURL: params.tokenAmount, tokenURL: params.token },
    initialAddLiquidityState
  )
  const { inputValue, outputValue, lastEditedField, outputCurrency } = addLiquidityState
  const inputCurrency = 'ETH'

function Simple() {
  const { t } = useTranslation();
  return <span>{t('my_simple_text')}</span>;
}

export const LoginForm: React.FC = ({ postLogin }) => {
  const classNames = useStyles();
  const [loginError, setLoginError] = useState(null);
  const [loginMutation] = useLoginMutation();
  const { t } = useTranslation('common');
  const onLogin = useCallback(
    async (values: Data) => {
      setLoginError(null);

      try {
        const loginWithEmailValue = {
          email: values.email,
          password: values.password,
        };
        const loginWithUsernameValue = {
          username: values.email,
          password: values.password,
        };
        const response = await loginMutation({
          variables: { data: values.email.includes('@') ? loginWithEmailValue : loginWithUsernameValue },
        });

export function PreferencesView() {
	const { visible } = useRedux();
	const { t } = useTranslation();

	return (
		
			<header>
				<title>
					{t('preferences.title')}
				</title>
			</header>
		
	);
}

export default function DiagnosisTable({
  stableTimeRange,
  unstableTimeRange,
  kind,
}: IDiagnosisTableProps) {
  const { t } = useTranslation()

  const [internalTimeRange, setInternalTimeRange] = useState<[number, number]>([
    0,
    0,
  ])
  useEffect(() => setInternalTimeRange(stableTimeRange), [stableTimeRange])
  function handleStart() {
    setInternalTimeRange(unstableTimeRange)
  }
  const timeChanged = useMemo(
    () =>
      internalTimeRange[0] !== unstableTimeRange[0] ||
      internalTimeRange[1] !== unstableTimeRange[1],
    [internalTimeRange, unstableTimeRange]
  )

export function useTranslations() {
  return useTranslation(defaultNamespace);
}

function ModeSelector({ location: { pathname }, history }) {
  const { t } = useTranslation()

  const [modalIsOpen, setModalIsOpen] = useState(false)

  const activeTabKey = poolTabOrder[poolTabOrder.findIndex(({ regex }) => pathname.match(regex))].textKey

  const navigate = useCallback(
    direction => {
      const tabIndex = poolTabOrder.findIndex(({ regex }) => pathname.match(regex))
      history.push(poolTabOrder[(tabIndex + poolTabOrder.length + direction) % poolTabOrder.length].path)
    },
    [pathname, history]
  )
  const navigateRight = useCallback(() => {
    navigate(1)
  }, [navigate])
  const navigateLeft = useCallback(() => {

function FileMessage ({ messageHash, fileHash, meta, ...filePreviewProps }) {
  const [showPreview, setShowPreview] = useState(false)
  const [t] = useTranslation()
  const element = useRef()

  const onLoaded = useCallback(() => {
    if (!element.current) return
    element.current.scrollIntoView({ block: 'nearest' })
  }, [element])

  const { name, size, mimeType } = meta

  function handleNameClick () {
    if (!isImage(name) && !isText(name) && !isAudio(name) && !isVideo(name)) return
    setShowPreview(!showPreview)
  }

  const ipfsLink =
    (window.gatewayAddress ? 'http://' + window.gatewayAddress : 'https://ipfs.io/ipfs/') + fileHash

function ChannelStatus ({ channel, theme }) {
  const [t] = useTranslation()
  return useObserver(() => {
    const userCount = channel ? channel.userCount : 0
    return (
      <div style="{{">
        {userCount} {t('channel.status.users', { count: userCount })}
      </div>
    )
  })
}

function LanguageDropdown({ children }: { children: ReactNode }) {
  const { i18n } = useTranslation()

  function handleClick(e) {
    i18n.changeLanguage(e.key)
  }

  const menu = (
    <menu>
      {_.map(ALL_LANGUAGES, (name, key) =&gt; {
        return {name}
      })}
    </menu>
  )

  return (
    
      {children}