why is the cursor messed like this?

My terminal goes like this:

import { useEffect } from "react";
import { Terminal as TerminalType } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
//import { SearchAddon } from 'xterm-addon-search'
import 'xterm/css/xterm.css';

export const Terminal = ({
    initialValue
  } : {
    initialValue?: string
  }) => {

  const id = 'xterm-container';
  useEffect(() => {
    const terminal = new TerminalType({
      cursorBlink: true,
      cursorStyle: window.api.isWindows ? "bar" : "underline"
    });

    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);

    window.api.receive('terminal.incomingData', (data) => {
      terminal.write(data);
    });
    
    terminal.open(document.getElementById(id) as HTMLElement);
    terminal.onData(key => {
      window.api.send('terminal.keystroke', key);
    });
    
    terminal.focus();
    window.api.send('terminal.keystroke', "cd C:\rn");

  }, []);

  return (
    <div id={id}></div>
  )
}

where in the backend I connect xterm to real terminal like this:

ipcMain.on('terminal.keystroke', (_, key) => {
  ptyProcess.write(key);
});

  const shell = isWindows ? 'powershell.exe' : 'bash';
  ptyProcess = spawn(shell, [], {
    name: 'xterm-color',
    cols: 80,
    rows: 30,
    cwd: isWindows ? process.env.USERPROFILE : process.env.HOME,
    env: process.env as INonUndefinedEnv
  });
  ptyProcess.onData(data =>
    EnforceNonNull(win).webContents.send('terminal.incomingData', data)
  );

but when send the text, the cursor for some reason gets messed like in the below image. Sending a text like this reproduce the error:

window.api.send('terminal.keystroke', "cd C:\rn");