How to use the i18n/useTranslation.useTranslation function in i18n

const BulkSelectorWidget: React.FunctionComponent = ({
  filteredRows
}) => {
  const { t } = useTranslation('shared')
  const { selectPage, selectAll, selectedRows } = useDataListTable()
  const { startIdx, endIdx } = useDataListPagination()

  const [isOpen, setIsOpen] = useState(false)

  const selectedCount = selectedRows.length
  const visibleRows = filteredRows.slice(startIdx, endIdx)
  const pageCount = visibleRows.length
  const allCount = filteredRows.length

  const onSelect = () => setIsOpen((current) => !current)

  // FIXME: Setting isChecked null creates an error in the console for uncontrolled React prop
  // eslint-disable-next-line no-nested-ternary
  const isChecked = (selectedCount === 0) ? false
    : (selectedCount === allCount) ? true

const BulkActionsWidget: React.FunctionComponent = ({
  actions
}) => {
  const { t } = useTranslation('shared')
  const { selectedRows } = useDataListTable()
  const { setModal } = useDataListBulkActions()
  const isDisabled = selectedRows.length === 0

  const [isOpen, setIsOpen] = useState(false)

  const toggle = (
    
      {t('bulk_actions.title')}
    
  )

  const warning = [
    // FIXME: add styles to look like in mockup

const DataListModal: React.FunctionComponent = ({
  children,
  items,
  title,
  submitButton,
  to,
  errorMsg,
  shouldWarnClose
}) => {
  const { t } = useTranslation('shared')
  const { closeModal } = useDataListBulkActions()

  const [isListCollapsed, setIsListCollapsed] = useState(items.length > 5)

  const onClose = () => {
    // eslint-disable-next-line no-alert
    if (!shouldWarnClose || window.confirm(t('modals.close_confirmation'))) {
      closeModal()
    }
  }

  const textListItems = useMemo(
    () => items.map((a) => {a}),
    [items]
  )

const ActionButtonApprove: React.FunctionComponent = ({ id }) => {
  const { t } = useTranslation('accountsIndex')
  const { addAlert } = useAlertsContext()

  const [isDisabled, setIsDisabled] = useState(false)

  const onClick = () => {
    setIsDisabled(true)
    approveAccount(id)
      .then((res) => {
        console.log(res)
        addAlert({ id, title: 'Success', variant: 'success' })
      })
      .catch((err) => {
        console.log(err)
        addAlert({ id, title: 'Success', variant: 'danger' })
      })
      .finally(() => setIsDisabled(false))

const DeveloperAccountsTable: React.FunctionComponent = ({ accounts }) => {
  const { t } = useTranslation('audienceAccountsListing')

  if (accounts.length === 0) {
    return 
  }

  const COLUMNS = [
    t('accounts_table.group_header'),
    t('accounts_table.admin_header'),
    t('accounts_table.signup_header'),
    t('accounts_table.applications_header'),
    t('accounts_table.state_header')
  ]

  const rows: string[][] = accounts.map((a) => [
    a.org_name,
    a.admin_name,

const AccountsTable: React.FunctionComponent = () => {
  const { t } = useTranslation('accountsIndex')
  const {
    columns,
    rows,
    sortBy,
    setSortBy
  } = useDataListTable()

  if (rows.length === 0) {
    return 
  }

  const { startIdx, endIdx, resetPagination } = useDataListPagination()
  const { filters } = useDataListFilters()

  const options = [
    { name: 'approved', humanName: t('actions_filter_options.by_state_options.approved') },

const CreateProductPage = () => {
  const { t } = useTranslation('product')
  useDocumentTitle(t('create.pagetitle'))
  const { goBack } = useHistory()
  const { addAlert } = useAlertsContext()

  const [name, setName] = useState('')
  const [systemName, setSystemName] = useState('')
  const [description, setDescription] = useState('')
  const [validations, setValidations] = useState({
    name: { validation: 'default' },
    system_name: { validation: 'default' },
    description: { validation: 'default' }
  })

  const {
    isPending, error, run, data
  } = useAsync({ deferFn: createProduct })

const Root: React.FunctionComponent = ({ children }) => {
  const { t } = useTranslation('shared')
  const { authToken } = useAuth()
  const Logo = 

  const navItems = [
    {
      title: t('navigation_items.overview'),
      to: '/',
      exact: true
    },
    {
      title: t('navigation_items.analytics'),
      to: '/analytics',
      items: [
        { to: '/analytics/usage', title: t('navigation_items.analytics_usage') }
      ]
    },

const AlertsProvider: React.FunctionComponent = ({ children }) => {
  const { t } = useTranslation('shared')

  type AlertsState = Array
  const [alerts, setAlerts] = React.useState([])

  const removeAlert = (id: string) => (
    setAlerts((prevAlerts) => prevAlerts.filter((a) => a.id !== id))
  )

  const addAlert = (alert: IAlert) => {
    const timeout = setTimeout(() => removeAlert(alert.id), TIMEOUT)
    setAlerts((prevAlerts) => [...prevAlerts, { ...alert, timeout }])
  }

  const CloseButton = ({ id, timeout }: { id: string, timeout: NodeJS.Timeout }) => (

const AppHeaderTools: React.FunctionComponent = () => {
  const { t } = useTranslation('shared')
  const { userProfile, logout } = useAuth()

  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false)
  const [isDropdownOpen, setIsDropDownOpen] = useState(false)

  const kebabDropdownItems = [
    
      
      {' Settings'}
    ,
    
      
      {' Help'}
    
  ]