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

import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import PersonIcon from "@material-ui/icons/Person";
import LinkIcon from "@material-ui/icons/Link";
import User from "./models/User";


const styles = theme => ({
  buttonGroup: {
    background: 'white',
  },
});


@withStyles(styles)
@withTranslation('base')
class ModelToolbar extends React.Component {
  static propTypes = {
    instance: PropTypes.any.isRequired,
    extraButtons: PropTypes.any,
    className: PropTypes.string,
    justify: PropTypes.string,
  };

  @computed get owner() {
    return User.getById(this.props.instance.owner);
  }

  render() {
    const {
      instance, extraButtons, className, justify, classes, style, t,
    } = this.props;

);
}
DoDelete.propTypes = {
	t: PropTypes.func,
	onClick: PropTypes.func,
};

const DoDeleteTrans = withTranslation('Help')(DoDelete);


export default class DatastoreDelete extends React.Component {
	static propTypes = {
		item: PropTypes.shape({
			$id: PropTypes.string,
		}),
	};

	constructor(props) {
		super(props);
		this.onService = this.onService.bind(this);
		this.onDelete = this.onDelete.bind(this);
	}

	onService(datastore, dataset, components) {

import { withTranslation } from 'react-i18next';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import CalendarPicker from './CalendarPicker.component';

export default withTranslation(I18N_DOMAIN_COMPONENTS)(CalendarPicker);

pathname: composeProgramDetailsUrl(program.url),
              state: `/ ${title}`
            }}
          >
            
              {program.title}
            
          
        
      
    
  );
};

const TradeHistorySubRow = compose>(
  translate(),
  React.memo
)(_TradeHistorySubRow);
export default TradeHistorySubRow;

interface Props extends OwnProps, WithTranslation {}

interface OwnProps {
  title: string;
  provider: OrderSignalProgramInfo;
  symbol: string;
}

suspended: 'suspended'
};
const actionName = {
  submit: 'Submit review',
  submitted: 'Cancel review',
  release: 'Release to store',
  active: 'View in store',
  suspended: 'View in store'
};
const tags = [
  { name: 'Config File', value: 'configFile' },
  { name: 'Set Price', value: 'setPrice', disabled: true },
  { name: 'Update Log', value: 'updateLog' }
];

@withTranslation()
@inject(({ rootStore }) => ({
  rootStore,
  appVersionStore: rootStore.appVersionStore,
  appStore: rootStore.appStore,
  clusterStore: rootStore.clusterStore,
  appCreateStore: rootStore.appCreateStore,
  categoryStore: rootStore.categoryStore,
  userStore: rootStore.userStore
}))
@observer
export default class VersionDetail extends Component {
  state = {
    isLoading: false
  };

  async componentDidMount() {

success: typeof alertMessageActions.success;
  removeNotification: TRemoveNotification;
  toggleNotifications: TToggleNotification;
}
interface DispatchProps {
  service: ResolveThunks;
}

interface OwnProps {
  settings: NotificationSettingViewModel;
  removeNotification: TRemoveNotification;
  toggleNotifications: TToggleNotification;
}

export default compose>(
  translate(),
  connect(
    undefined,
    mapDispatchToProps
  ),
  React.memo
)(CustomNotification);

DeleteModal.propTypes = {
  onCancel: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  files: PropTypes.number,
  folders: PropTypes.number,
  t: PropTypes.func.isRequired,
  tReady: PropTypes.bool.isRequired
}

DeleteModal.defaultProps = {
  className: '',
  files: 0,
  folders: 0
}

export default withTranslation('files')(DeleteModal)

aria-haspopup='true'
                    className={classes.menuIconButton}
                    aria-label='Menu'
                    onClick={this.handleMenuOpen}>
                    
                
                {mainMenuControl}
                 (this.themePicker = ref)} />
                 (this.languagePicker = ref)} />
            
        );
    }
}

const enhance = compose(
    withTranslation(),
    withStyles(styles, { withTheme: true })
);

export default enhance(MainMenuButton);

interface StateProps {
  errorMessage?: string;
}

interface ServiceThunks extends ActionCreatorsMapObject {
  addNotification: TAddNotification;
}
interface DispatchProps {
  service: ResolveThunks;
}

const AssetNotificationsCustom = compose<
  React.ComponentType
>(
  withLoader,
  translate(),
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  React.memo
)(_AssetNotificationsCustom);
export default AssetNotificationsCustom;

return (
      
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation('global')(ErrorBox))