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

// Vendor
import React, {ChangeEvent, Component} from 'react';

// Vendor Components
import {WithI18n, withI18n} from 'react-i18next';

// Types
import {Language} from 'react-boilerplate/types/language';

interface Props {}

type EnhancedProps = Props & WithI18n;

const enhance = withI18n();

class LanguagePicker extends Component {
  render() {
    const {t, i18n} = this.props;

    return (
      <select value="{i18n.language}">
        <option value="{Language.French}">{t(`languages.french`)}</option>
        <option value="{Language.English}">{t(`languages.english`)}</option>
      </select>
    );
  }

  private handleChange = (event: ChangeEvent) =&gt; {
    this.props.i18n.changeLanguage(event.target.value);
  };

const mapStateToProps = (state) => ({
        alerts: state.alerts,
        forceUpdate: state.wallet.forceUpdate,
        shouldUpdate: state.wallet.shouldUpdate,
        displayTestWarning: state.wallet.displayTestWarning,
    });

    const mapDispatchToProps = {
        dismissAlert,
    };

    return connect(
        mapStateToProps,
        mapDispatchToProps,
    )(withI18n()(AlertsData));
}

{text}
      
    )
  }
}
DateAcquiredInput.defaultProps = {
  onClick: () => { },
  value: '',
}

DateAcquiredInput.propTypes = {
  onClick: PropTypes.func,
  value: PropTypes.string,
};

export default withI18n('translation')(SongAvailableView);

SettingsView.propTypes = {
  currentTab: PropTypes.object,
  handleChange: PropTypes.func,
  updateHeader: PropTypes.func,
  //resetHeader: PropTypes.func,
  refreshTabs: PropTypes.func,
}
SettingsView.defaultProps = {
  currentTab: null,
  handleChange: () => { },
  updateHeader: () => { },
  //resetHeader: () => {},
  refreshTabs: () => { },
}

export default withI18n('translation')(SettingsView);

}
ExportSetlistModal.propTypes = {
    onClose: PropTypes.func,
    show: PropTypes.bool,
    exportSetlistKey: PropTypes.string,
    exportSetlistName: PropTypes.string,
};

ExportSetlistModal.defaultProps = {
    onClose: () => { },
    show: false,
    exportSetlistKey: '',
    exportSetlistName: '',
};

export default withI18n('translation')(ExportSetlistModal);

);
  }
}
DashboardView.propTypes = {
  //currentTab: PropTypes.object,
  updateHeader: PropTypes.func,
  //resetHeader: PropTypes.func,
  handleChange: PropTypes.func,
}
DashboardView.defaultProps = {
  //currentTab: null,
  updateHeader: () => { },
  //resetHeader: () => {},
  handleChange: () => { },
}
export default withI18n('translation')(DashboardView)

)
  }
}
FTUEView.propTypes = {
  showFTUE: PropTypes.bool,
  closeFTUE: PropTypes.func,
}
FTUEView.defaultProps = {
  showFTUE: true,
  closeFTUE: () => { },
}

export default withI18n('translation')(FTUEView);

}
    }

    AutoNodeSwitching.displayName = `withAutoNodeSwitching(${AutoNodeSwitchedComponent.name})`;

    const mapStateToProps = (state) => ({
        node: state.settings.node,
        autoNodeSwitching: state.settings.autoNodeSwitching,
    });

    const mapDispatchToProps = {
        generateAlert,
        setFullNode,
    };

    return connect(mapStateToProps, mapDispatchToProps)(withI18n()(AutoNodeSwitching));
}

);
  }
}
SetlistSearchView.propTypes = {
  //currentTab: PropTypes.object,
  //resetHeader: PropTypes.func,
  updateHeader: PropTypes.func,
}
SetlistSearchView.defaultProps = {
  //currentTab: null,
  //resetHeader: () => { },
  //resetHeader: () => { },
  updateHeader: () => { },
}
export default withI18n('translation')(SetlistSearchView);

artist: '',
  album: '',
  isSetlist: true,
  isDashboard: false,
  isSongview: false,
  isSongpack: false,
  isWeekly: false,
  dlcappid: '',
  close: () => { },
  removeFromDB: () => { },
  ignoreArrangement: () => { },
  songID: '',
  refreshView: () => { },
}

export default withI18n('translation')(SongDetailView)