diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx
index aa72529b19e..3357043d19d 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx
@@ -91,8 +91,9 @@ class SubscriptionPolicySelect extends React.Component {
                         }}
                         style={{ width: 200 }}
                         renderInput={(params) => (<TextField {...params} />)}
-                        renderOption={(policy) => (
+                        renderOption={(props, policy) => (
                             <MenuItem
+                                {...props}
                                 value={policy}
                                 key={policy}
                                 id={'policy-select-' + policy}
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx
index 142f1f6e221..fce5a45ba3e 100755
--- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx
@@ -240,8 +240,8 @@ const subscribeToApi = (props) => {
                             classes={{ root: classes.fullWidth }}
                             renderInput={(params) => <TextField {...params} />}
                             groupBy={(option) => option.tierPlan === 'COMMERCIAL'  ? 'Commercial' : 'Free'}
-                            renderOption={(policy) => (
-                                <MenuItem value={policy.tierName} key={policy.tierName} className={classes.appDropDown}>
+                            renderOption={(props, policy) => (
+                                <MenuItem {...props} value={policy.tierName} key={policy.tierName} className={classes.appDropDown}>
                                     {policy.tierPlan === 'COMMERCIAL' ? (
                                         <React.Fragment>
                                             <ListItemText
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx
index a0eeba9f330..37afad14362 100755
--- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx
@@ -121,17 +121,17 @@ const tokens = (props) => {
                     disableCloseOnSelect
                     value={accessTokenRequest.scopesSelected}
                     onChange={(e, newValue) => handleChange('scopesSelected', { target: { value: newValue } })}
-                    renderOption={(option, { selected }) => (
-                        <>
+                    renderOption={(props, option, { selected }) => (
+                        <li {...props}>
                             <Checkbox
                                 id={'access-token-scope-' + option}
                                 icon={icon}
                                 checkedIcon={checkedIcon}
-                                style={{ marginRight: 8 }}
+                                style={{marginRight: 8}}
                                 checked={selected}
                             />
                             {option}
-                        </>
+                        </li>
                     )}
                     renderInput={(params) => (
                         <TextField {...params}