diff --git a/example/src/components/FormValidator.js b/example/src/components/FormValidator.js
index e465b1ad8..35cb60cdc 100644
--- a/example/src/components/FormValidator.js
+++ b/example/src/components/FormValidator.js
@@ -115,6 +115,10 @@ export default function FormValidator() {
     setValues({ ...values, [name]: value })
   }
 
+  const handleBlur = event => {
+    console.log('handleBlur', event)
+  }
+
   const [itemValue, setItemValue] = useState('')
   const [itemList, setItemList] = useState([])
 
@@ -170,6 +174,7 @@ export default function FormValidator() {
               onChange={e =>
                 setValues({ ...values, positiveInteger: e.target.value })
               }
+              onBlur={handleBlur}
             />
           </UValidatorForm>
         </Grid>
diff --git a/package.json b/package.json
index 701e502a8..5042cc528 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [
diff --git a/src/components/ActiveAutoComplete/ActiveAutoComplete.js b/src/components/ActiveAutoComplete/ActiveAutoComplete.js
index f3f4822e8..b42130225 100644
--- a/src/components/ActiveAutoComplete/ActiveAutoComplete.js
+++ b/src/components/ActiveAutoComplete/ActiveAutoComplete.js
@@ -51,10 +51,10 @@ export default function ActiveAutoComplete({
   readOnly,
   minLength,
   maxLength,
-  usedItemIds,
-  allowContextSpecific,
-  interactiveMode,
-  counter,
+  usedItemIds = [],
+  allowContextSpecific = false,
+  interactiveMode = false,
+  counter = false,
   placeholder,
   InputLabelProps,
   props,
@@ -221,10 +221,3 @@ ActiveAutoComplete.propTypes = {
   /** Label props applied to input field*/
   InputLabelProps: PropTypes.object,
 }
-
-ActiveAutoComplete.defaultProps = {
-  allowContextSpecific: false,
-  interactiveMode: false,
-  counter: false,
-  usedItemIds: [],
-}
diff --git a/src/components/ActiveCurrencyField/ActiveCurrencyField.js b/src/components/ActiveCurrencyField/ActiveCurrencyField.js
index e6f148ce9..b1a8c07d5 100644
--- a/src/components/ActiveCurrencyField/ActiveCurrencyField.js
+++ b/src/components/ActiveCurrencyField/ActiveCurrencyField.js
@@ -6,10 +6,10 @@ import ActiveFormPositiveInteger from '../ActiveFormPositiveInteger'
  * The ActiveCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc. The cool feature with ActiveCurrencyField is you can read and write at the same place.
  */
 export default function ActiveCurrencyField({
-  inputPrefix,
-  decimalScale,
-  fixedDecimalScale,
-  textAlign,
+  inputPrefix = '$ ',
+  decimalScale = 2,
+  fixedDecimalScale = true,
+  textAlign = 'right',
   inputProps,
   ...props
 }) {
@@ -70,10 +70,3 @@ ActiveCurrencyField.propTypes = {
   /** Input text align */
   textAlign: PropTypes.string,
 }
-
-ActiveCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right',
-}
diff --git a/src/components/ActiveDatePicker/ActiveDatePicker.js b/src/components/ActiveDatePicker/ActiveDatePicker.js
index 8e75fc40f..7a03f6680 100644
--- a/src/components/ActiveDatePicker/ActiveDatePicker.js
+++ b/src/components/ActiveDatePicker/ActiveDatePicker.js
@@ -48,14 +48,16 @@ const StyledBox = styled(Box, {
  * Please have look at [Material UI Date Picker](https://mui.com/x/api/date-pickers/date-picker/) for more details
  */
 export default function ActiveDatePicker({
-  inputFormat,
+  inputFormat = 'dd/MM/yyyy',
   label,
   onChange,
   value,
   showLabelHelp,
-  InputLabelProps,
+  InputLabelProps = {
+    shrink: true,
+  },
   InputLabelHelpProps,
-  inputVariant,
+  inputVariant = 'outlined',
   interactiveMode,
   readOnly,
   ...others
@@ -110,11 +112,3 @@ ActiveDatePicker.propTypes = {
   /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object,
 }
-
-ActiveDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true,
-  },
-  inputFormat: 'dd/MM/yyyy',
-}
diff --git a/src/components/Shared/InputLabelHelp.js b/src/components/Shared/InputLabelHelp.js
index 3c08df284..042b7e0ce 100644
--- a/src/components/Shared/InputLabelHelp.js
+++ b/src/components/Shared/InputLabelHelp.js
@@ -47,12 +47,12 @@ const StyledBox = styled(Box)(({ theme }) => ({
 
 export default function InputLabelHelp({
   inputLabel,
-  type,
-  label,
+  type = 'tooltip',
+  label = 'Help',
   link,
-  icon,
+  icon = null,
   tooltipTitle,
-  tooltipPlacement,
+  tooltipPlacement = 'top',
 }) {
   return (
     <Fragment>
@@ -111,10 +111,3 @@ InputLabelHelp.propTypes = {
   // Tooltip placement
   tooltipPlacement: PropTypes.string,
 }
-
-InputLabelHelp.defaultProps = {
-  label: 'Help',
-  type: 'tooltip',
-  icon: null,
-  tooltipPlacement: 'top',
-}
diff --git a/src/components/Shared/PositiveNumberFormat.js b/src/components/Shared/PositiveNumberFormat.js
index b44d26402..f28f249a7 100644
--- a/src/components/Shared/PositiveNumberFormat.js
+++ b/src/components/Shared/PositiveNumberFormat.js
@@ -5,18 +5,30 @@ import NumberFormat from 'react-number-format'
 export default function PositiveNumberFormat({
   inputRef,
   name,
+  value,
   onChange,
-  thousandSeparator,
-  isNumericString,
-  allowNegative,
-  decimalScale,
-  fixedDecimalScale,
+  onBlur,
+  thousandSeparator = true,
+  isNumericString = false,
+  allowNegative = false,
+  decimalScale = 0,
+  fixedDecimalScale = false,
   ...other
 }) {
   return (
     <NumberFormat
       {...other}
+      value={value}
       getInputRef={inputRef}
+      onBlur={() =>
+        onBlur &&
+        onBlur({
+          target: {
+            name: name,
+            value: value,
+          },
+        })
+      }
       onValueChange={(values, sourceInfo) => {
         onChange({
           target: {
@@ -36,10 +48,14 @@ export default function PositiveNumberFormat({
 }
 
 PositiveNumberFormat.propTypes = {
+  // field value
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   // Input ref
   inputRef: PropTypes.func.isRequired,
   // On each onChange value will be formatted
   onChange: PropTypes.func.isRequired,
+  // callback function to be called on blur
+  onBlur: PropTypes.func,
   // Thousand separator
   thousandSeparator: PropTypes.bool,
   // Is numeric string
@@ -51,11 +67,3 @@ PositiveNumberFormat.propTypes = {
   //If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool,
 }
-
-PositiveNumberFormat.defaultProps = {
-  thousandSeparator: true,
-  isNumericString: false,
-  allowNegative: false,
-  decimalScale: 0,
-  fixedDecimalScale: false,
-}
diff --git a/src/components/UAriaLive/UAriaLive.js b/src/components/UAriaLive/UAriaLive.js
index 91fdd68e8..adb8566f3 100644
--- a/src/components/UAriaLive/UAriaLive.js
+++ b/src/components/UAriaLive/UAriaLive.js
@@ -18,7 +18,12 @@ const StyledBox = styled(Box)(() => ({
  * This component is intended to generate a wrapper with the aria-live property.
  * Refer for [Aria live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions )
  */
-export default function UAriaLive({ text, type, role, ariaAtomic }) {
+export default function UAriaLive({
+  text,
+  type = 'polite',
+  role = 'log',
+  ariaAtomic = false,
+}) {
   return (
     <StyledBox
       aria-live={type}
@@ -41,9 +46,3 @@ UAriaLive.propTypes = {
   /** Aria role */
   role: PropTypes.string,
 }
-
-UAriaLive.defaultProps = {
-  type: 'polite',
-  role: 'log',
-  ariaAtomic: false,
-}
diff --git a/src/components/UAsyncBadge/UAsyncBadge.js b/src/components/UAsyncBadge/UAsyncBadge.js
index 88c5922d0..df8955343 100644
--- a/src/components/UAsyncBadge/UAsyncBadge.js
+++ b/src/components/UAsyncBadge/UAsyncBadge.js
@@ -49,8 +49,8 @@ export default function UAsyncBadge({
   variant,
   text,
   visible,
-  ariaRole,
-  ariaLive,
+  ariaRole = 'alert',
+  ariaLive = 'assertive',
   onReset,
 }) {
   const chipRef = useRef()
@@ -106,8 +106,3 @@ UAsyncBadge.propTypes = {
   /** Aria live of the badge */
   ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
 }
-
-UAsyncBadge.defaultProps = {
-  ariaRole: 'alert',
-  ariaLive: 'assertive',
-}
diff --git a/src/components/UAvatarImage/UAvatarImage.js b/src/components/UAvatarImage/UAvatarImage.js
index 9f36c7096..bc2ace6a6 100644
--- a/src/components/UAvatarImage/UAvatarImage.js
+++ b/src/components/UAvatarImage/UAvatarImage.js
@@ -56,12 +56,12 @@ const StyledBox = styled(Box)(({ theme }) => ({
  * If no image url from source app first letter of the user email will be displayed
  */
 export default function UAvatarImage({
-  userEmail,
-  size,
-  mode,
-  tooltipText,
-  count,
-  zIndexValue,
+  userEmail = '',
+  size = 'default',
+  mode = '',
+  tooltipText = '',
+  count = 0,
+  zIndexValue = 0,
   loadPhoto,
 }) {
   const [photoUrl, setPhotoUrl] = useState('')
@@ -116,12 +116,3 @@ UAvatarImage.propTypes = {
   /** get photo url from the respective application */
   loadPhoto: PropTypes.func,
 }
-
-UAvatarImage.defaultProps = {
-  userEmail: '',
-  size: 'default', // image displays default size
-  mode: '',
-  tooltipText: '',
-  count: 0,
-  zIndexValue: 0,
-}
diff --git a/src/components/UButton/UButton.js b/src/components/UButton/UButton.js
index b3a0a9bac..a973e41d1 100644
--- a/src/components/UButton/UButton.js
+++ b/src/components/UButton/UButton.js
@@ -34,9 +34,13 @@ const StyledBox = styled(Box)(({ theme }) => ({
  * Custom advanced button with unicef colors and also it has spinning effect in the button
  *
  * */
-export default function UButton(props) {
-  const { spinButton, loading, variant, color, ...others } = props
-
+export default function UButton({
+  spinButton = false,
+  loading = false,
+  variant = 'contained',
+  color = 'primary',
+  ...others
+}) {
   function getVariant(variant) {
     switch (variant) {
       case 'uDefault':
@@ -95,10 +99,3 @@ UButton.propTypes = {
   /**  color of the button */
   color: PropTypes.string,
 }
-
-UButton.defaultProps = {
-  color: 'primary',
-  variant: 'contained',
-  spinButton: false,
-  loading: false,
-}
diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
index a1e67ece4..633effa50 100644
--- a/src/components/UConfirmationButton/UConfirmationButton.js
+++ b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -53,20 +53,19 @@ const CONFIRMATION_VARIANTS = {
  * This button displays the confirmation where user has clicked the button
  * It has two varint icon/menu item
  */
-export default function UConfirmationButton(props) {
-  const {
-    onConfirm,
-    id,
-    buttonText,
-    enabled,
-    variant,
-    icon,
-    confirmText,
-    confirmActionText,
-    cancelText,
-    buttonVariant,
-    confirmVariant,
-  } = props
+export default function UConfirmationButton({
+  onConfirm,
+  id,
+  buttonText = 'Delete',
+  enabled = true,
+  variant = 'icon',
+  icon = <DeleteOutlinedIcon />,
+  confirmText = 'Confirm deletion?',
+  confirmActionText = 'Yes, delete',
+  cancelText = 'No',
+  buttonVariant = 'text',
+  confirmVariant = 'menu',
+}) {
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
 
@@ -192,15 +191,3 @@ UConfirmationButton.propTypes = {
   /** Button variant applied to menuItem button */
   buttonVariant: PropTypes.string,
 }
-
-UConfirmationButton.defaultProps = {
-  buttonText: 'Delete',
-  variant: 'icon',
-  enabled: true,
-  confirmText: 'Confirm deletion?',
-  confirmActionText: 'Yes, delete',
-  cancelText: 'No',
-  icon: <DeleteOutlinedIcon />,
-  buttonVariant: 'text',
-  confirmVariant: 'menu',
-}
diff --git a/src/components/UContent/UContent.js b/src/components/UContent/UContent.js
index ae6482ef3..4763e2d40 100644
--- a/src/components/UContent/UContent.js
+++ b/src/components/UContent/UContent.js
@@ -20,7 +20,7 @@ const Root = styled('main')(({ theme }) => ({
  * * Children under Ucontent will be display in the main content.
  * * UContent must be wrapped inside the ULayout.
  */
-export default function UContent({ headerHeight, children }) {
+export default function UContent({ headerHeight = 64, children }) {
   return (
     <Root className={classes.content}>
       <div style={{ minHeight: headerHeight }} />
@@ -33,7 +33,3 @@ UContent.propTypes = {
   /** Height of the header including MainMenu */
   headerHeight: PropTypes.number,
 }
-
-UContent.defaultProps = {
-  headerHeight: 64,
-}
diff --git a/src/components/UHeader/UHeader.js b/src/components/UHeader/UHeader.js
index 70354ac0b..54658bc04 100644
--- a/src/components/UHeader/UHeader.js
+++ b/src/components/UHeader/UHeader.js
@@ -76,17 +76,17 @@ const StyledAppBar = styled(AppBar, {
 
 export default function UHeader(props) {
   const {
-    position,
+    position = 'fixed',
     applicationName,
-    showHamburgerMenu,
-    hideLogo,
+    showHamburgerMenu = true,
+    hideLogo = false,
     logo,
-    hideLogoBorderLine,
-    logoUrl,
+    hideLogoBorderLine = true,
+    logoUrl = '/',
     onLogoClick,
     openDrawer,
     toggleDrawer,
-    elevation,
+    elevation = 4,
     bgColor,
   } = props
 
@@ -211,12 +211,3 @@ UHeader.propTypes = {
   /** AppBar elevation value to handle the box shadow effect */
   elevation: PropTypes.number,
 }
-
-UHeader.defaultProps = {
-  position: 'fixed',
-  showHamburgerMenu: true,
-  hideLogo: false,
-  logoUrl: '/',
-  hideLogoBorderLine: true,
-  elevation: 4,
-}
diff --git a/src/components/UPageLoadingProgress/UPageLoadingProgress.js b/src/components/UPageLoadingProgress/UPageLoadingProgress.js
index 0e148aa8b..869e04502 100644
--- a/src/components/UPageLoadingProgress/UPageLoadingProgress.js
+++ b/src/components/UPageLoadingProgress/UPageLoadingProgress.js
@@ -22,8 +22,7 @@ const StyledBox = styled(Box)(() => ({
  * 1. Display circular progress
  * 2. Display text message
  */
-export default function UPageLoadingProgress(props) {
-  const { text } = props
+export default function UPageLoadingProgress({ text = '' }) {
   return (
     <StyledBox
       display="flex"
@@ -45,7 +44,3 @@ UPageLoadingProgress.propTypes = {
   /** text to display instead of circular progress */
   text: PropTypes.string,
 }
-
-UPageLoadingProgress.defaultProps = {
-  text: '',
-}
diff --git a/src/components/USideBar/USideBar.js b/src/components/USideBar/USideBar.js
index 9f90b3438..cd04ec0ea 100644
--- a/src/components/USideBar/USideBar.js
+++ b/src/components/USideBar/USideBar.js
@@ -31,8 +31,12 @@ const StyledBox = styled(Box)(props => ({
  *
  * USideBar must be wrapped inside the ULayout(Parent Component).
  */
-export default function USideBar(props) {
-  const { headerHeight, width, ...others } = props
+export default function USideBar({
+  headerHeight = 64,
+  width = 300,
+  children,
+  ...others
+}) {
   return (
     <StyledBox display={{ xs: 'none', md: 'block' }} width={width}>
       <Drawer
@@ -44,7 +48,7 @@ export default function USideBar(props) {
         {...others}
       >
         <div style={{ minHeight: headerHeight }} />
-        {props.children}
+        {children}
       </Drawer>
     </StyledBox>
   )
@@ -58,8 +62,3 @@ USideBar.propTypes = {
    */
   width: PropTypes.number,
 }
-
-USideBar.defaultProps = {
-  headerHeight: 64,
-  width: 300,
-}