Merge pull request #2786 from SUI-Components/fix-breadcrumb-demo

docs(molecule/breadcrumb): solve the demo crush

components/molecule/breadcrumb/demo/ArticleCustomIcon.js

@@ -16,24 +16,25 @@ import {
 import MoleculeBreadcrumb from '../src/index.js'
 
 const getCustomTextIcon = text => props => text && <span {...props}>{`${text}`}&nbsp;</span>
-const getCustomIcon = icon => props => icon && <AntDesignIcon icon={icon} style={{color: 'currentColor'}} {...props} />
+const getCustomIcon = icon =>
+  icon !== undefined && (props => <AntDesignIcon icon={icon} style={{color: 'currentColor'}} {...props} />)
 
 const ArticleCustomIcon = ({className, items}) => {
-  const [icon, setIcon] = useState(undefined)
+  const [iconID, setIconID] = useState(undefined)
   const [text, setText] = useState('/')
   return (
     <Article className={className}>
       <H2>Custom Icon</H2>
       <Paragraph>
-        MoleculeBreadcrumb offers the oportunity to customize the separator icon between items through the{' '}
+        MoleculeBreadcrumb offers the opportunity to customize the separator icon between items through the{' '}
         <Code>icon</Code> prop, which might be a React component.
       </Paragraph>
-      <RadioButtonGroup value={icon} onChange={(event, value) => setIcon(value)}>
+      <RadioButtonGroup value={iconID} onChange={(event, value) => setIconID(value)}>
         {['AiFillCaretRight', 'AiOutlineCaretRight', 'AiOutlineDoubleRight', 'AiOutlineRight'].map((iconValue, key) => (
-          <RadioButton key={iconValue} value={iconValue} checked={icon === iconValue} />
+          <RadioButton key={key} value={iconValue} checked={iconID === iconValue} />
         ))}
       </RadioButtonGroup>
-      <MoleculeBreadcrumb items={items} icon={getCustomIcon(icon)} />
+      <MoleculeBreadcrumb items={items} icon={getCustomIcon(iconID)} />
       <Paragraph>Icon might be even a text (or string) Component node</Paragraph>
       <Input value={text} onChange={event => setText(event.target.value)} />
       <MoleculeBreadcrumb items={items} icon={getCustomTextIcon(text)} />