Synchronize/change value of rich text field

CollectionTest.ts

import {CollectionConfig} from 'payload/types'
import {TestComponent} from '../component/TestComponent'

export const CollectionTest: CollectionConfig = {
  slug: 'test',
  fields: [
    // Normal text field
    {
      name: 'text',
      type: 'text',
      required: true,
    },
    // Field I want to import data from field "text"
    {
      name: 'synchroText',
      type: 'text',
      required: true,
      admin: {
        readOnly: true,
      },
    },
    // Normal rich text field
    {
      name: 'richText',
      type: 'richText',
      required: true,
      admin: {
        elements: [],
        leaves: [],
      },
    },
    // Field I want to import data from field "richText"
    {
      name: 'synchroRichText',
      type: 'richText',
      required: true,
      admin: {
        readOnly: true,
        elements: [],
        leaves: [],
      },
    },
    {
      name: 'synchro',
      type: 'ui',
      admin: {
        components: {
          Field: TestComponent,
        },
      },
    },
  ],
}

TestComponent.tsx

import {useAllFormFields, useField, useForm} from 'payload/components/forms'
import React from 'react'

export const TestComponent = () => {
  const {submit} = useForm()

  // Synchronization with setValue
  const {value: value1} = useField<string>({path: 'text'})
  const {setValue: setValue2} = useField<string>({path: 'synchroText'})
  const {value: value3} = useField<string>({path: 'richText'})
  const {setValue: setValue4} = useField<string>({path: 'synchroRichText'})

  const synchroFields = () => {
    setValue2(value1)
    setValue4(value3)

    setTimeout(() => {
      submit() // I'd like to get rid of this
    }, 1000)
  }

  // Synchronization with useField
  const [fields, dispatchFields] = useAllFormFields()
  const text = useField<string>({
    path: `text`,
  })
  const richText = useField<string>({
    path: `richText`,
  })

  const synchroFields2 = () => {
    dispatchFields({
      type: 'UPDATE',
      path: 'synchroText',
      value: text.value,
    })

    dispatchFields({
      type: 'UPDATE',
      path: 'synchroRichText',
      value: richText.value,
    })

    setTimeout(() => {
      submit() // I'd like to get rid of this
    }, 1000)
  }

  return (
    <div>
      <button type="button" onClick={synchroFields}>
        Synchronization with seteValue
      </button>{' '}
      <button type="button" onClick={synchroFields2}>
        Synchronization with dispatch
      </button>
    </div>
  )
}