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

const BlockButton = ({ format, icon }) => {
  const editor = useSlate()
  return (
    <button> {
        event.preventDefault()
        toggleBlock(editor, format)
      }}
    &gt;
      {icon}
    </button>
  )
}

const LinkButton: React.FC<{ icon: IconDefinition }> = ({ icon }) => {
  const editor = useSlate();
  const active = Controller.isBlockActive(editor, "link");
  return (
    <button style="{{" size="sm"> {
        event.preventDefault()
        const url = window.prompt('Enter the URL of the link:')
        if (!url) return
        Controller.insertLink(editor, url);
      }}
    &gt;
      
    </button>
  )

const MarkButton = ({ format, icon }) => {
  const editor = useSlate()
  return (
    <button> {
        event.preventDefault()
        toggleMark(editor, format)
      }}
    &gt;
      {icon}
    </button>
  )
}

const FormatButton = ({ format, icon }) => {
  const editor = useSlate()
  return (
    <button reversed=""> {
        event.preventDefault()
        toggleFormat(editor, format)
      }}
    &gt;
      {icon}
    </button>
  )
}

const FormatButton = ({ format, icon, toggleFormat, isFormatActive }) => {
  const editor = useSlate()
  return (
     {
        event.preventDefault()
        toggleFormat(editor, format)
      }}
    >
      {icon}
    
  )
}

export function useEditor(): Editor {
  return useSlate() as Editor
}

const LinkButton = () => {
  const editor = useSlate()
  return (
    <button> {
        event.preventDefault()
        const url = window.prompt('Enter the URL of the link:')
        if (!url) return
        insertLink(editor, url)
      }}
    &gt;
      link
    </button>
  )
}

const MarkButton: React.FC<{ mark: Mark, icon: IconDefinition }> = ({ mark, icon }) => {
  const editor = useSlate();
  const active = Controller.isMarkActive(editor, mark);
  return (
    <button style="{{" size="sm"> {
        event.preventDefault();
        Controller.toggleMark(editor, mark);
      }}
    &gt;
      
    </button>
  )
}

const FormatButton = ({format}) => {
    const editor = useSlate()

    const isActive = isFormatActive(editor, format);
    const iconName = "fa-" + format;
    const classes = {fa: 1, active: isActive};
    classes[iconName] = 1;

    return (
        <span> {
                  event.preventDefault();
                  toggleFormat(editor, format);
              }}
        &gt;
      <i>
    </i></span><i>
    )</i>

const BlockButton: React.FC<{ block: Block, icon: IconDefinition }> = ({ block, icon }) => {
  const editor = useSlate();
  const active = Controller.isBlockActive(editor, block);
  return (
    <button style="{{" size="sm"> {
        event.preventDefault();
        Controller.toggleBlock(editor, block);
      }}
    &gt;
      
    </button>
  )
}