How to use the @edtr-io/ui.styled.img function in @edtr-io/ui

import { styled } from '@edtr-io/ui'
import * as React from 'react'

import { imageState } from '.'
import { ImageLoaded } from './upload'

const ImgWrapper = styled.div<{ maxWidth: number }>(props => {
  return {
    maxWidth: props.maxWidth > 0 ? props.maxWidth + 'px' : undefined,
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
})

const Img = styled.img({
  maxWidth: '100%',
  display: 'block',
  marginLeft: 'auto',
  marginRight: 'auto'
})

export class ImageRenderer extends React.Component {
  public render() {
    const { state, imagePreview, disableMouseEvents } = this.props
    const image = (
      
        <img alt="{state.description.value}" src="{imagePreview">

cache[src] = data
        setApiResponse(data)
      })
  },
  500
)

const Geogebra = styled.iframe({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  border: 'none'
})
const PreviewImage = styled.img({
  maxWidth: '100%',
  height: 'auto'
})
const ScaleContainer = styled.div(
  ({
    disableCursorEvents,
    aspectRatio
  }: {
    disableCursorEvents?: boolean
    aspectRatio: number
  }) => ({
    position: 'relative',
    padding: '0',
    paddingTop: `${100 / aspectRatio}%`,
    display: 'block',
    height: '0',