const MockStorage = () => {

  const anno = useAnnotator<RecogitoW3CTextAnnotator>();

  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!anno) return;

    const handleCreateAnnotation = (annotation: W3CTextAnnotation) => console.log('create', annotation);
    anno.on('createAnnotation', handleCreateAnnotation);

    const handleDeleteAnnotation = (annotation: W3CTextAnnotation) => console.log('delete', annotation);
    anno.on('deleteAnnotation', handleDeleteAnnotation);

    const handleSelectionChanged = (annotations: W3CTextAnnotation[]) => console.log('selection changed', annotations);
    anno.on('selectionChanged', handleSelectionChanged);

    const handleUpdateAnnotation = (annotation: W3CTextAnnotation, previous: W3CTextAnnotation) => console.log('update', annotation, previous);
    anno.on('updateAnnotation', handleUpdateAnnotation);

    return () => {
      anno.off('createAnnotation', handleCreateAnnotation);
      anno.off('deleteAnnotation', handleDeleteAnnotation);
      anno.off('selectionChanged', handleSelectionChanged);
      anno.off('updateAnnotation', handleUpdateAnnotation);
    };
  }, [anno, count]);

  return <>
    <button onClick={() => setCount(c => c + 1)}>
      Trigger {count}
    </button>
  </>;

};