How to use the @storybook/components.monoFonts.fontFamily function in @storybook/components

const storybookIframe = 'storybook-preview-iframe';
const addedElAttr = 'addedbycssresourcesaddon';

// Taken from StoryPanel.js
const highlighterTheme = {
  ...darcula,
  'pre[class*="language-"]': {
    ...darcula['pre[class*="language-"]'],
    margin: 'auto',
    width: 'auto',
    height: 'auto',
    minHeight: '100%',
    overflow: 'hidden',
    boxSizing: 'border-box',
    display: 'flex',
    fontFamily: monoFonts.fontFamily,
    fontSize: 'inherit',
  },
  'code[class*="language-"]': {
    ...darcula['code[class*="language-"]'],
    margin: 0,
    fontFamily: 'inherit',
  },
};

const PanelWrapper = styled.div({
  position: 'absolute',
  top: '10px',
  left: '10px',
  fontFamily: monoFonts.fontFamily,
});

display: 'flex',
    fontFamily: monoFonts.fontFamily,
    fontSize: 'inherit',
  },
  'code[class*="language-"]': {
    ...darcula['code[class*="language-"]'],
    margin: 0,
    fontFamily: 'inherit',
  },
};

const PanelWrapper = styled.div({
  position: 'absolute',
  top: '10px',
  left: '10px',
  fontFamily: monoFonts.fontFamily,
});

export default class CssResourcePanel extends Component {
  constructor(props) {
    super(props);
    this.state = { cssresources: `` };
    this.onAddCssresources = this.onAddCssresources.bind(this);
    this.parser = new DOMParser();
  }

  componentDidMount() {
    const { channel } = this.props;
    this.iframe = document.getElementById(storybookIframe);
    if (!this.iframe) {
      throw new Error('Cannot find Storybook iframe');
    }