Why My ReactQuill lose focus whenever I type inside React router 6 after navigating from other page?

Question

I don't know why my editor loses focus while I type each time. Steps to reproduce

1. type something in ReactQuill (atm it's normal),
2. navigate to page b
3. will detect url change, and pop up Prompt to let the user setState in Parent component.
4. now in page b, we switch back to page a
5. this time, every time I type in editor, the editor lose focus, and shows warning in console

addRange(): The given range isn't in document.

PS: If I put the ReactQuill outside the Routes, it works without any losing focus issue. react version 16, react-quill 1.3.5

class Parent extends React.Component {
 ...
render() {
<Routes>
  <Route element={<Layout />} >
    <Route path="/a" element={(
       <PromptWrapper>
         <ReactQuill
            style={{ marginBottom: 15 }}
            minHeight={100}
            innerRef={(ref) => this.aboutUsEditor = ref}
            theme="core"
            value={aboutUsDescription}
            onChange={(text, delta, source) =>
              this.handleChangeEditor(text, delta, source,)
            }
            modules={{
              toolbar: false,
            }}
          />
       </PromptWrapper>
    )}/>
    <Route path="/b" element={(
       <div>
         Page 2
       </div>
    )}/>
  </Routes>

Is there anything I should be aware ? Thanks