How to use the @edtr-io/core.StateType.number function in @edtr-io/core

paramName: 'attachment[file]',
  maxFileSize: 2 * 1024 * 1024,
  allowedExtensions: ['gif', 'jpg', 'jpeg', 'png', 'svg'],
  getAdditionalFields: () => {
    return {
      type: 'file',
      csrf: ((window as unknown) as { csrf: string }).csrf
    }
  },
  getStateFromResponse: response => {
    return {
      src: response.files[0].location
    }
  }
}
const counterState = StateType.number(0)

const counterPlugin: StatefulPlugin = {
  // eslint-disable-next-line react/display-name
  Component: ({ editable, focused, state }) => {
    return (
      <div style="{{">
        {state.value}
        {editable &amp;&amp; (
          <button> {
              state.set(value =&gt; value + 1)
            }}</button></div>

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { createImageEditor } from './editor'
import { UploadConfig } from './upload'

export const imageState = StateType.object({
  src: StateType.string(''),
  href: StateType.string(''),
  target: StateType.string(''),
  rel: StateType.string(''),
  description: StateType.string(''),
  maxWidth: StateType.number(0)
})
export const createImagePlugin = (
  config: ImagePluginConfig
): StatefulPlugin => {
  return {
    Component: createImageEditor(config),
    state: imageState,
    onPaste: (clipboardData: DataTransfer) => {
      const value = clipboardData.getData('text')

      if (/\.(jpe?g|png|bmp|gif|svg)$/.test(value)) {
        return {
          state: {
            src: value,
            href: '',
            target: '',