How to use the slate-react.ReactEditor.toDOMRange function in slate-react

useEffect(() => {
      if (targetMention && mentionUsers.length > 0) {
        const el = mentionRef.current
        const domRange = ReactEditor.toDOMRange(editor, targetMention)
        const rect = domRange.getBoundingClientRect()
        const topCalc = 68 + (mentionUsers.length * 28)

        el.style.top = `-${topCalc}px`
        el.style.left = '0px'
      }
    }, [mentionUsers.length, editor, indexMention, searchMention, targetMention])

useEffect(() => {
    if (target && chars.length > 0) {
      const el = ref.current
      const domRange = ReactEditor.toDOMRange(editor, target)
      const rect = domRange.getBoundingClientRect()
      el.style.top = `${rect.top + window.pageYOffset + 24}px`
      el.style.left = `${rect.left + window.pageXOffset}px`
    }
  }, [chars.length, editor, index, search, target])