Editable text input field in React

EditableText.jsx

import { useRef, useState, useEffect, useCallback } from 'react'
import cn from 'classnames'

import './EditableText.css'

const EditableText = ({
    className,
    inputClassName,
    as: ElementTag = 'span',
    value,
    onSubmit,
    onDoubleClick,
}) => {
    
    const refNewValue = useRef()
    
    const [isEditing, setIsEditing] = useState(false)
    const [newValue, setNewValue] = useState('')
    
    const handleDoubleClick = useCallback(e => {
        
        if (isEditing) {
            setIsEditing(false)
        } else {
            setNewValue(value)
            setIsEditing(true)
        }
        
        if (onDoubleClick)
            onDoubleClick(e)
        
    }, [value, isEditing])
    
    const onKeyUp = useCallback(e => {
        
        if (e?.key === 'Enter') {
            onSubmit(newValue)
            setIsEditing(false)
        }
        
        if (e?.key === 'Escape')
            setIsEditing(false)
        
    }, [onSubmit, newValue])
    
    useEffect(() => {
        
        if (refNewValue.current && isEditing)
            refNewValue.current?.focus()
        
    }, [refNewValue, isEditing])
    
    if (!isEditing) return (
        
        <ElementTag
            className={className}
            onDoubleClick={handleDoubleClick}>
            {value}
        </ElementTag>
        
    )
    
    return (
        
        <input
            ref={refNewValue}
            className={cn('', inputClassName)}
            type="text"
            value={newValue}
            placeholder=""
            autoComplete="off"
            onKeyUp={onKeyUp}
            onChange={e => setNewValue(e.target.value)} />
        
    )
    
}

export default EditableText