Issue with adding super and sub script options to the editor in Sanity.io

import {GrSubscript, GrSuperscript} from 'react-icons/gr'
const SuperscriptDecorator = props => (
  <span style={{backgroundColor: 'yellow'}}>{props.children}</span>
)
const SubscriptDecorator = props => (
  <span style={{backgroundColor: 'yellow'}}>{props.children}</span>
)
...
...
marks: {
          decorators: [
            {title: 'Strong', value: 'strong'},
            {title: 'Emphasis', value: 'em'},
            {title: 'Underline', value: 'underline'},
            {title: 'Superscript', value: 'sup', icon: GrSuperscript, component: SuperscriptDecorator},
            {title: 'Subscript', value: 'sub', icon: GrSubscript}
          ],
}

icon: () => 'Super'

const SuperIcon = () => <div>x<sup>2</sup></div>
const SuperDecorator = props => <sup>{props.children}</sup>
const SubIcon = () => <div>x<sub>2</sub></div>
const SubDecorator = props => <sub>{props.children}</sub>
...

decorators: [
...
   { title: "Sub", value: 'sub', icon: SubIcon, component: SubDecorator },
   { title: "Super", value: 'super', icon: SuperIcon, component: SuperDecorator },
]

decorators: [
  {
    title: 'Highlight',
    value: 'highlight',
    blockEditor: {
      icon: MarkerIcon,
      render: highlightRender,
    },
  },
],