How to use the @edtr-io/store.isFocused function in @edtr-io/store

>((props, ref) => {
  const [expandedState, setExpanded] = React.useState(false)
  const [showExtendedSettings, setShowExtendedSettings] = React.useState(false)
  const rows = props.state
  const index = props.index
  const row = rows[index]
  const focused = useScopedSelector(isFocused(row.id))

  // DnD
  const rowRef = React.useRef(null)

  React.useImperativeHandle(ref, () => {
    return { getNode: () => rowRef.current }
  })

  if (props.connectDragSource) {
    props.connectDragPreview(rowRef)
    props.connectDropTarget(rowRef)
    // const opacity = isDragging ? 0 : 1
  }

  const extendedSettingsNode = React.useRef(null)
  const settingsTheme = usePluginTheme(name, rowsPluginThemeFactory)

return function MultimediaExplanationEditor(
    props: PluginEditorProps
  ) {
    function handleIllustratingChange(e: React.ChangeEvent) {
      props.state.illustrating.set(e.target.value === 'illustrating')
    }
    const textFocused = useScopedSelector(
      hasFocusedDescendant(props.state.explanation.id)
    )

    const multimediaFocused = useScopedSelector(
      isFocused(props.state.multimedia.id)
    )

    const hasFocus = props.focused || multimediaFocused || textFocused

    const multimedia: {
      plugin: string
      state?: unknown
    } | null = useScopedSelector(serializeDocument(props.state.multimedia.id))
    const [
      replacedMultimediaCache,
      setReplacedMultimediaCache
    ] = React.useState>({})
    function handleMultimediaChange(selected: string) {
      setReplacedMultimediaCache(current => {
        if (!multimedia) return current

export function SolutionStepsEditor(
  props: PluginEditorProps
) {
  const { state, editable } = props
  const { solutionSteps } = state
  const pluginFocused = useHasFocusSelector(props.id)
  const introductionFocused = useScopedSelector(
    isFocused(state.introduction.id)
  )
  const strategyFocused = useHasFocusSelector(state.strategy.id)

  return editable && pluginFocused ? (
     dragContent(result, state)}>
      
        
          <content type="{SolutionPluginTypes.introduction}">
            {state.introduction.render()}
          </content>
        
        {!state.hasStrategy.value ? (
           {
              state.hasStrategy.set(true)

export function useHasFocusSelector(id: string) {
  const elementFocused = useScopedSelector(isFocused(id))
  const descendantFocused = useScopedSelector(hasFocusedDescendant(id))
  return elementFocused || descendantFocused
}