[React] Firefoxにおいて、input/textarea要素でIME入力中の文字をBackspaceで消去したときに、最後の文字が消せない場合がある

Question

前提・実現したいこと

Reactでテキスト編集を含むアプリケーションを開発しています。textareaでテキストの折り返しを可能にしつつ、Enterキー押下時に改行をキャンセルしblurする仕様を実装しようとし、以下のコンポーネントを作成しました。

import React, { useState } from 'react'

export const App = () => {
  const [value, setValue] = useState('')
  const [isComposing, setIsComposing] = useState(false)

  const handleKeyDown = e => {
    // isComposingがtrue(IME変換中)の時は変換確定のためにEnterキーを受け付ける
    if (!isComposing && e.code === 'Enter') {
      e.preventDefault()
      e.currentTarget.blur()
    }
  }

  const handleChange = e => {
    // テキストペースト時は改行を半角スペースに変換する
    setValue(e.target.value.replace(/\n/g, ' '))
  }

  return (
    <div>
      <textarea
        value={value}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onCompositionStart={() => setIsComposing(true)}
        onCompositionEnd={() => setIsComposing(false)}
      />
    </div>
  )
}

発生している問題

上記コンポーネントのtextareaに日本語を入力し、入力を確定せずにBackspaceで消していくと、最後の文字(入力時の最初の文字)が消えずに残ります。Firefoxで発生したもののChromeでは再現せず、Firefoxのバグの可能性もあると思うのですが、これを回避する方法は何かありますでしょうか？

問題を再現できる最小(と思われる)コード

import React, { useState } from 'react'

export const App = () => {
  const [value, setValue] = useState('')
  const [state, setState] = useState(false)

  return (
    <div>
      <textarea
        value={value}
        onChange={e => setValue(e.target.value)}
        onCompositionEnd={() => setState(state => !state)}
      />
    </div>
  )
}

わかっていること

• macOS Big Sur 11.5.2、React 17.0.0にて、Firefox 91.0.2で問題が発生し、Google Chrome 92.0.4515.159で問題が発生しないことを確認しています
• 上記コードのtextareaをinputにしても再現します
• 上記最小コードの9行目value={value}を削除すると問題は発生しません
• 上記最小コードの11行目を、削除する or onCompositionEnd={() => {}}とする or onCompositionEnd={() => console.log('test')}とする or onCompositionEnd={() => setState(false)}とすると、問題は発生しません
• 上記最小コードの11行目をonCompositionEnd={() => setState(true)}とすると、最初のIME入力終了時のみ問題が発生します
• compositionendイベント発火時にstateが変化しなければ問題は発生しないようです