Fix required attribute in USelectPicker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

src/components/USelectPicker/Input.js

@@ -3,6 +3,7 @@ import { components } from 'react-select'
 import PropTypes from 'prop-types'
 
 export default function Input(props) {
+  console.log(props)
   let describedBy = props['aria-describedby'] //react-select generated aria-describedby
   if (!props.hasValue) {
     const customDescribedBy = props.selectProps['aria-describedby'] //custom aria-describedby passed through the props
@@ -14,7 +15,15 @@ export default function Input(props) {
         : undefined
   }
 
-  return <components.Input {...props} aria-describedby={describedBy} />
+  return (
+    <components.Input
+      {...props}
+      aria-describedby={describedBy}
+      required={
+        (props && props.selectProps && props.selectProps.required) || undefined
+      }
+    />
+  )
 }
 
 Input.propTypes = {

src/components/USelectPicker/InputComponent.js

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 export default function InputComponent({ inputRef, ...props }) {
-  return <div ref={inputRef} {...props} />
+  return (
+    <div
+      ref={inputRef}
+      {...props}
+      required={undefined} // Remove required from div element
+      aria-invalid={undefined} // Remove aria-invalid from div element
+    />
+  )
 }
 
 InputComponent.propTypes = {