How can I stop the Save button not to be clickable when viewing virtual fields

I have some problem with the virtual fields where I fetch the data from the api. And it display in the virtual fields. However everytime I viewing the documentation the Save button is appearing ready to be clicked again.

'use client'
import React, { useEffect } from 'react'

import { useField, FieldLabel, TextInput, useFieldProps, useDocumentInfo } from '@payloadcms/ui'
import { TextFieldClientProps } from 'payload'
import { stringify } from 'qs-esm'

const DEFAULT_LIMIT = 9999
const DEFAULT_DEPTH = 0
const DEFAULT_PAGE = 1

export const stockComponent: React.FC<TextFieldClientProps> = ({ field }) => {
  const { label } = field
  const { path, readOnly } = useFieldProps()
  const { value, setValue } = useField<string>({ path })
  const { id } = useDocumentInfo()
  const stringifyQuery = stringify(
    {
      depth: DEFAULT_DEPTH,
      limit: DEFAULT_LIMIT,
      page: DEFAULT_PAGE,
      where: {
        product: {
          equals: id,
        },
      },
    },
    { addQueryPrefix: true },
  )

  const setStockValue = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/inventory-logs${stringifyQuery}`,
    )
    const data = await res.json()
    let displayValue = 0
    for (let i = 0; i < data.docs.length; i++) {
      if (data.docs[i].type === 'import') {
        displayValue += data.docs[i].quantity
      } else {
        displayValue -= data.docs[i].quantity
      }
    }
    setValue(displayValue.toString())
  }
  useEffect(() => {
    setStockValue()
  }, [])
  // This one is read only
  return (
    <div className="field-type text">
      <FieldLabel field={field} htmlFor={`field-${path}`} label={label} />
      <div className="field-type__wrap">
        <TextInput value={value} path={path} onChange={setValue} readOnly={Boolean(readOnly)} />
      </div>
    </div>
  )
}

import type { TextField } from 'payload'

export const stockField: TextField = {
  name: 'stock',
  type: 'text',
  admin: {
    readOnly: true,
    components: {
      Field: {
        path: '@/payload/fields/productDisplayStock/component#stockComponent',
      },
    },
  },
  hooks: {
    beforeChange: [
      ({ siblingData }) => {
        siblingData.stock = undefined
      },
    ],
  },
}