как перенести содержимое div contenteditable в другой div reactjs

все компоненты загружаются index.js:

import React from 'react';
import './index.css';
import {createRoot} from 'react-dom/client';
import $ from 'jquery';
import {ArticlelsBlockF} from './articles';
import {PageBuiltF} from './PageBuilt';
import {BrowserRouter as Router,Route,Routes } from "react-router-dom";
import ReactDOMServer from 'react-dom/server'
const root = createRoot( document.getElementById('root'));

root.render(
<div id='Block'>
    <Router >
        <Routes>
            <Route path={"/"} element={<PageBuiltF/>} />

            <Route path={"/articles"} element={<ArticlelsBlockF/>} />
        </Routes>
    </Router>


</div>,
    document.getElementById('root'));

компонент PageBuilt.js:

import React from 'react';
import './index.css';
export function PageBuiltF(){
    return(
        <div id={"block2"}>
            <p className={"teg"}>Заголовок</p>
            <textarea   placeholder={"Введи заголовок..."}  id={"tegInput"}/>
            <p className={"teg"}>Текст</p>`

            <input type={"file"} id={"imgFormat"}  />
            <input type={"file"} id={"audioFormat"}  />
            <input type={"file"} id={"videoFormat"}  />

            <div id={"format"}>
                <s id={"formatText"}>Форматирование</s>
                <button id={"weight"} onClick={()=>{document.execCommand('bold');}}>B</button>
                <button id={"italic"} onClick={()=>{document.execCommand('italic');}}>I</button>
                <button  id={"style"} onClick={()=>{document.execCommand('underline', false, ''); }}>S</button>
                <button id={"strike"} onClick={()=>{document.execCommand('strikeThrough', false, '');  }}><s>A</s></button>
            </div>
            <div className="tegText" contentEditable="true">
                Delete this text
                <div contentEditable="false">

                </div>
            </div>
      
            <div id={"inputBlock"}>
                <label id={"PhotoField"} htmlFor={"imgFormat"} >Добавить фото</label>
                <label id={"audioFile"}  htmlFor={"audioFormat"} >Добавить аудио</label>
                <label id={"videoFile"} htmlFor={"videoFormat"}>Добавить видео</label>
            </div>

            <a id={"aTeg"} href={"/articles"}>
                <button id={"button"}  >Отправить</button>
            </a>
        </div>
    );
}

компонент articles.js:

import React from 'react';
import './index.css';
export function ArticlelsBlockF(){
     return(
         <div className={"tegTextArticle"}  >

         </div>
     );

}

Мне нужно: Сначала загружается компонент PageBultF, там идет заполнение div contenteditable ".tegText",после нажатия кнопки "#button" идет создание новой страницы с названием "articles" + индекс+1, а после сохранения, вас переносит на страницу "/articles"+ индекс вас встречает блок div, с содержимым, которое вы водили в ".tegText"

я так понимаю что, чтобы сохранить введенный контент из ".tegText" в ".tegTextArticle", нужно использовать dangerouslysetinnerhtml и вставить в него теги блока но в виду строки.

тогда как превратить содержимое блока в строку? Да и тем более передать эту строку из файла index.js в articles.js? Через пропсы? Дайте ответ пожалуйста