如何在reactjs中将子级追加到光标位置

<div contentEditable="true" ref={contentEditableRef}></div>

const contentEditableRef = useRef(null);

const handleAppendChild = () => {
  const range = document.getSelection().getRangeAt(0);
  const newNode = document.createElement("span");
  newNode.innerHTML = "子级内容";
  range.insertNode(newNode);
};

import React, { useRef } from "react";

const MyComponent = () => {
  const contentEditableRef = useRef(null);

  const handleAppendChild = () => {
    const range = document.getSelection().getRangeAt(0);
    const newNode = document.createElement("span");
    newNode.innerHTML = "子级内容";
    range.insertNode(newNode);
  };

  return (
    <div>
      <div contentEditable="true" ref={contentEditableRef}></div>
      <button onClick={handleAppendChild}>追加子级</button>
    </div>
  );
};

export default MyComponent;