How to use the slate-react.useSelected function in slate-react

const VideoElement = ({ attributes, children, element }) => {
  const editor = useEditor()
  const selected = useSelected()
  const focused = useFocused()
  const { url } = element
  return (
    <div>
      <div selected="" style="{{">
        </div></div>

const ImageElement = ({ attributes, children, element }) => {
  const selected = useSelected()
  const focused = useFocused()
  return (
    <div>
      <div>
        <img src="{element.url}">
      </div>
      {children}
    </div>

const ImageElement = ({ attributes, children, element }) => {
  const selected = useSelected()
  const focused = useFocused()
  return (
    <div>
      {children}
      <img src="{element.url}">
    </div>
  )
}

const MentionElement = ({ attributes, children, element }) => {
  const selected = useSelected()
  const focused = useFocused()
  return (
    <span selected="" style="{{"></span>

function Mention({ attributes, children, element, style = {}, absolute, preview }) {
  const selected = useSelected()
  const focused = useFocused()
  const [hoverRef, isHovered] = useHover()
  const user = element.selectedUser

  let displayText = user.address.slice(0, 7)

  if (user.username) {
    displayText = user.username
  }

  if (preview) {
    return `@${displayText}`
  }

  return (