How to use the prop-types.instanceOf function in prop-types

import { observer } from "mobx-react";

import Flash from "react-reveal/Flash";

import { AlertStore } from "Stores/AlertStore";
import { TooltipWrapper } from "Components/TooltipWrapper";
import { BaseLabel } from "Components/Labels/BaseLabel";

// Same as FilteringLabel but for labels that are counters (usually @state)
// and only renders a pill badge with the counter, it doesn't render anything
// if the counter is 0
const FilteringCounterBadge = observer(
  class FilteringCounterBadge extends BaseLabel {
    static propTypes = {
      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
      name: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired,
      counter: PropTypes.number.isRequired,
      themed: PropTypes.bool.isRequired,
      alwaysVisible: PropTypes.bool,
      defaultColor: PropTypes.oneOf(["light", "primary"])
    };
    static defaultProps = {
      defaultColor: "light"
    };

    render() {
      const {
        name,
        value,
        counter,

{users}
      
    );
  }

}

/**
 * Wrapper component for using unstated
 */
const UserPictureListWrapper = (props) => {
  return createSubscribedElement(UserPictureList, props, [AppContainer]);
};

UserPictureList.propTypes = {
  appContainer: PropTypes.instanceOf(AppContainer).isRequired,

  userIds: PropTypes.arrayOf(PropTypes.string),
  users: PropTypes.arrayOf(PropTypes.object),
};

UserPictureList.defaultProps = {
  userIds: [],
  users: [],
};

export default UserPictureListWrapper;

}

ClientResponderDecorator.defaultProps = {
    editorOptions: null,
    children: null,
};

ClientResponderDecorator.propTypes = {
    viewState: PropTypes.shape({
        bBox: PropTypes.instanceOf(SimpleBBox),
        fullExpression: PropTypes.string,
        components: PropTypes.object,
    }).isRequired,
    children: PropTypes.node,
    model: PropTypes.instanceOf(Node).isRequired,
    editorOptions: PropTypes.shape({
        propertyType: PropTypes.string,
        key: PropTypes.string,
        model: PropTypes.instanceOf(Object),
        getterMethod: PropTypes.func,
        setterMethod: PropTypes.func,
    }),
    onBreakpointClick: PropTypes.func.isRequired,
    isBreakpoint: PropTypes.bool.isRequired,
};

ClientResponderDecorator.contextTypes = {
    getOverlayContainer: PropTypes.instanceOf(Object).isRequired,
    editor: PropTypes.instanceOf(Object).isRequired,
    environment: PropTypes.instanceOf(Object).isRequired,
    activeArbiter: PropTypes.instanceOf(ActiveArbiter).isRequired,

);
    }
}

CommentEdit.propTypes = {
    classes: PropTypes.instanceOf(Object).isRequired,
    apiId: PropTypes.string.isRequired,
    allComments: PropTypes.instanceOf(Array).isRequired,
    commentsUpdate: PropTypes.func.isRequired,
    toggleShowEdit: PropTypes.func.isRequired,
    comment: PropTypes.instanceOf(Object).isRequired,
    intl: PropTypes.shape({
        formatMessage: PropTypes.func,
    }).isRequired,
};

export default injectIntl(withStyles(styles, { withTheme: true })(CommentEdit));

className='syntax-errors-counter-container'
                                    onClick={this.toggleErrorListPopover}
                                >
                                    <span>{this.state.syntaxErrors.length}</span>
                                
                            
                        }
                    
                
            
        );
    }
}

SourceView.propTypes = {
    file: PropTypes.instanceOf(File).isRequired,
    commandProxy: PropTypes.shape({
        on: PropTypes.func.isRequired,
        dispatch: PropTypes.func.isRequired,
        getCommands: PropTypes.func.isRequired,
    }).isRequired,
    parseFailed: PropTypes.bool.isRequired,
    displayErrorList: PropTypes.bool.isRequired,
    panelResizeInProgress: PropTypes.bool.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
};

SourceView.contextTypes = {
    isTabActive: PropTypes.func.isRequired,
    editor: PropTypes.instanceOf(Object).isRequired,
    ballerinaPlugin: PropTypes.objectOf(Object).isRequired,

{state === 'library' &&
                    }
                
            
        );
    }
}

ToolPaletteView.propTypes = {
    isTransformActive: PropTypes.bool.isRequired,
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
};

ToolPaletteView.contextTypes = {
    astRoot: PropTypes.instanceOf(CompilationUnitNode),
    environment: PropTypes.instanceOf(PackageScopedEnvironment).isRequired,
};

export default ToolPaletteView;

)}
      
    );
  }
}

MapDrawingToolbar.propTypes = {
  activeColorpicker: PropTypes.string,
  activeDrawingTool: PropTypes.string,
  activeMarker: PropTypes.string,
  existingCollectionId: PropTypes.string,
  existingGeometry: PropTypes.instanceOf(Map),
  existingModelId: PropTypes.number,
  existingGeometryStyle: PropTypes.instanceOf(Map),
  geometryStyle: PropTypes.shape({
    [constants.LINE_COLOR_PROPERTY_NAME]: PropTypes.string.isRequired,
    [constants.LINE_OPACITY_PROPERTY_NAME]: PropTypes.number.isRequired,
    [constants.FILL_COLOR_PROPERTY_NAME]: PropTypes.string.isRequired,
    [constants.FILL_OPACITY_PROPERTY_NAME]: PropTypes.number.isRequired,
  }).isRequired,
  isMarkerPanelVisible: PropTypes.bool.isRequired,
  markers: PropTypes.arrayOf(PropTypes.string),
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  resetDrawingToolbarState: PropTypes.func.isRequired,
  setActiveColorpicker: PropTypes.func.isRequired,
  setActiveDrawingTool: PropTypes.func.isRequired,
  setActiveMarkerIndex: PropTypes.func.isRequired,
  setGeometryStyle: PropTypes.func.isRequired,
  setMarkers: PropTypes.func.isRequired,

children: null,
};

StatementDecorator.propTypes = {
    viewState: PropTypes.shape({
        bBox: PropTypes.instanceOf(SimpleBBox),
        fullExpression: PropTypes.string,
        components: PropTypes.objectOf(PropTypes.instanceOf(SimpleBBox)),
    }).isRequired,
    children: PropTypes.node,
    model: PropTypes.instanceOf(ASTNode).isRequired,
    expression: PropTypes.string.isRequired,
    editorOptions: PropTypes.shape({
        propertyType: PropTypes.string,
        key: PropTypes.string,
        model: PropTypes.instanceOf(ASTNode),
        getterMethod: PropTypes.func,
        setterMethod: PropTypes.func,
    }),
    onBreakpointClick: PropTypes.func.isRequired,
    isBreakpoint: PropTypes.bool.isRequired,
    isDebugHit: PropTypes.bool.isRequired,
};

StatementDecorator.contextTypes = {
    dragDropManager: PropTypes.instanceOf(DragDropManager).isRequired,
    messageManager: PropTypes.instanceOf(MessageManager).isRequired,
    getOverlayContainer: PropTypes.instanceOf(Object).isRequired,
    editor: PropTypes.instanceOf(Object).isRequired,
    environment: PropTypes.instanceOf(Object).isRequired,
    activeArbiter: PropTypes.instanceOf(ActiveArbiter).isRequired,
};

this.setState({ tmpValue: formatTime(value, locale) })}
          >
            
          
        
      
    );
  }
}

TimePicker.propTypes = {
  /** Value of the input */
  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
  /** locale string for formating the time string */
  locale: PropTypes.string,
  /** id of the popover */
  id: PropTypes.string,
  /** Placement of the popover */
  placement: OverlayTrigger.propTypes.placement
};
TimePicker.defaultProps = {
  value: new Date(),
  locale: 'en-US',
  id: 'popover-time-picker',
  placement: 'top'
};
export default TimePicker;