When editing the yaml obtained with react-jsonschema-form, when entering characters in "" the cursor moves to another location

Question

I'm working on a website that converts data entered in a JSON form (using react-jsonschema-form) into YAML. This is my first project using JavaScript and my first experience with frontend development, so I apologize in advance if anything in my description is unclear, as I'm still learning.

On the website, users can enter data either in the form or in a field where the YAML configuration is displayed. However, when modifying the data in the YAML field, the quotation marks disappear in the places where double quotes "" are by default, and the cursor moves to the bottom of the configuration. It's acceptable for the quotation marks to disappear, but the cursor movement is not desired.

Here's an example:

config:
  name: ""

After entering 2 characters:

config:
  name: е
е

The schema.json for this example is as follows:

{
  "type": "object",
  "title": "config",
  "required": [
    "config"
  ],
  "properties": {
    "config": {
      "type": "object",
      "default": null,
      "title": "config section",
      "required": [
        "name"
      ],
      "properties": {
        "name": {
          "type": "string",
          "default": "",
          "title": "name"
        }
      }
    }
  }
}

Here's my implementation of the JSON form and YAML configuration output:

import validator from "@rjsf/validator-ajv8";
import schema from './schema.json';
import uiSchema from './uiSchema.json'
import Form from "@rjsf/mui";
import { Grid } from '@mui/material';
import YAML from 'yaml';
import * as React from 'react';
import { useEffect } from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';


const App = () => {
  const [formData, setFormData] = React.useState(null);
  const [textAreaValue, setTextAreaValue] = React.useState(YAML.stringify(formData));

  const handleFormChange = ({ formData }) => {
    setFormData(formData);
    setTextAreaValue(YAML.stringify(formData));
  }

  const handleTextAreaChange = (event) => {
    const value = event.target.value;
    setTextAreaValue(value);

    try {
      const parsedData = YAML.parse(value);
      setFormData(parsedData);
    } catch (error) {
      console.error('Error parsing YAML', error);
      // Handle parse error, e.g. show error message to user.
    }
  }

  //  save the entered data in the form
  useEffect(() => {
    const data = window.localStorage.getItem(`MY_APP_STATE_${window.location.pathname}`);
    if (data !== null) setFormData(JSON.parse(data));
  }, []);

  useEffect(() => {
    window.localStorage.setItem(`MY_APP_STATE_${window.location.pathname}`, JSON.stringify(formData));
  }, [formData]);


  // Update yaml config after going to url
  useEffect(() => {
    if (formData) {
      setTextAreaValue(YAML.stringify(formData));
    }
  }, [formData]);


  return (
      <Grid container spacing={2}>
  <Grid item xs={6}>
    <Box
      component="form"
      sx={{
          '& .MuiTextField-root': { m: 1, width: '90ch' },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="standard-multiline-static"
          multiline
          rows={48}
          variant="standard"
          value={textAreaValue}
          onChange={handleTextAreaChange}
        />
      </div>
    </Box>
  </Grid>
  <Grid item xs={6}>
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <Tab label="Json Form" value="1" />
          </TabList>
        </Box>
        <TabPanel value="1">
        <Form
          schema={schema}
          uiSchema={uiSchema}
          formData={formData}
          onChange={handleFormChange}
          validator={validator}
        />
        </TabPanel>
      </TabContext>
    </Box>
  </Grid>
</Grid>


  );
};

export default App;

From what I understand, the problem occurs when entering a character within the quotation marks. Since the form and the YAML configuration field are combined, the character is added to the form, and then the form removes the quotation marks, causing the cursor to jump. I tried removing the quotation marks before updating formData, but the cursor still moved. I also attempted to move the cursor back to its original position after entering text within the quotation marks, but this resulted in a situation where, with fast typing, a single character could end up at the end of the configuration.