Best way to implement edit cell in expand/virtual table

[WojakGra]

Hi,
What is the best way to add input for editing in a cell?

This is my current implementation, where I have expand and virtualization in the table.

[WojakGra]

import { TextInput } from '@mantine/core'
import { useEffect, useState } from 'react'
import type { RevisionLibrary } from '../../../../services/types'
import type { RevisionLibraryTableCellProps } from './RevisionLibraryTableCellProps'

const EditableNameCell = ({ cellContext, onMutate }: RevisionLibraryTableCellProps) => {
  const cellValue = cellContext.row.original[cellContext.column.id as keyof RevisionLibrary] as string
  const [value, setValue] = useState(cellValue)
  useEffect(() => {
    setValue(cellValue)
  }, [cellValue])

  const onBlur = () => {
    if (cellValue === value) {
      return
    }

    const newData = { ...cellContext.row.original, [cellContext.column.id]: value }
    if (newData._id) {
      onMutate(
        { revisionLibraryId: newData._id, payload: newData },
        {
          onError: () => {
            setValue(cellValue)
          },
        }
      )
    }
  }

  return (
    <TextInput
      variant="unstyled"
      size="xs"
      autoComplete="off"
      value={value}
      onBlur={onBlur}
      onChange={(e) => setValue(e.target.value)}
      style={{ flexGrow: 1 }}
    />
  )
}

export default EditableNameCell

export const createColumns = ({
  revisionId,
  onMutate,
  onAdd,
  onLibraryOpen,
}: ColumnConfig): ColumnDef<RevisionLibrary>[] => [
  ...
  {
    accessorKey: 'name',
    header: 'Nazwa',
    size: 350,
    cell: (cellContext) => <EditableNameCell cellContext={cellContext} onMutate={onMutate} />,
  },
  ...
]

[WojakGra]

// Flush pending changes if the virtual row unmounts while editing
useEffect(() => {
  return () => {
    if (isDirty.current) {
      commit();
    }
  };
}, [value]);

Without any debounce, the value is always sent to server instantly