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

if (res.data.responses.response.item) {
          const {
            width = 800,
            height = 500,
            previewUrl
          } = res.data.responses.response.item
          data = { width, height, previewUrl }
        }
        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
  }: {

height: '0',
    overflow: 'hidden',
    pointerEvents: disableCursorEvents ? 'none' : 'auto'
  })
)

const Video = styled.video({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  border: 'none'
})

const VideoIframe = styled.iframe({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  border: 'none'
})

export type VideoRendererProps = PluginEditorProps & {
  disableCursorEvents?: boolean
}

export function VideoRenderer(props: VideoRendererProps) {
  const data = getMatchingData(props.state.src.value)
  if (!data) {
    return (