react-dates: Failed styles prop type check while trying to render DateRangePicker

Overview I tried applying the DateRangePickerWrapper example along with the application of react-styles for theming but i m getting the following error:

Failed prop type: The prop styles is marked as required in DateInput, but its value is undefined.

My wrapper component

import React from 'react';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DateRangePicker } from 'react-dates';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import PropTypes from 'prop-types';
import momentPropTypes from 'react-moment-proptypes';
import omit from 'lodash/omit';


ThemedStyleSheet.registerInterface(aphroditeInterface);

const propTypes = {
    autoFocus: PropTypes.bool,
    autoFocusEndDate: PropTypes.bool,
    initialStartDate: momentPropTypes.momentObj,
    initialEndDate: momentPropTypes.momentObj,
    selectedBgColor: PropTypes.string,
    selectedTextColor: PropTypes.string,
};
const defaultProps = {
    autoFocus: false,
    autoFocusEndDate: false,
    initialStartDate: null,
    initialEndDate: null,
    selectedBgColor: '#02C8A4',
    selectedTextColor: '#fff',
};
export class DateRange extends React.Component {
    constructor(props) {
        super(props);
        let focusedInput = null;
        if (props.autoFocus) {
            focusedInput = 'startDate';
        } else if (props.autoFocusEndDate) {
            focusedInput = 'endDate';
        }
        this.state = {
            focusedInput,
            startDate: props.initialStartDate,
            endDate: props.initialEndDate,
        };
        ThemedStyleSheet.registerTheme({
            reactDates: {
                ...DefaultTheme.reactDates,
                color: {
                    ...DefaultTheme.reactDates.color,
                    selected: {
                        backgroundColor: props.selectedBgColor,
                        color: props.selectedTextColor,
                    },
                },
            },
        });
    }

    onDatesChange = ({ startDate, endDate }) => {
        this.setState({ startDate, endDate });
    }

    onFocusChange = (focusedInput) => {
        this.setState({ focusedInput });
    }

    render() {
        const { focusedInput, startDate, endDate } = this.state;
        // These props are needed on the wrapper level but are not part of the airbnb single date picker
        // If we dont do this, an error is thrown by the component :/
        const props = omit(this.props, [
            'autoFocus',
            'autoFocusEndDate',
            'initialStartDate',
            'initialEndDate',
            'selectedBgColor',
            'selectedTextColor',
        ]);
        return (
            <DateRangePicker
                {...props}
                startDateId="start_date_input"
                endDateId="end_date_input"
                onDatesChange={this.onDatesChange}
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                startDate={startDate}
                endDate={endDate}
            />
        );
    }
}
DateRange.propTypes = propTypes;
DateRange.defaultProps = defaultProps;

Is there a step i am missing? Previous threads tend to suggest trying to set an interface which i am already doing. Note: Identical setup works for the SingleDatePicker with the exception of the startDate endDate props which differ here ofcourse.