我想在React元素的<textarea>或<input>中输入空格的制表符大小。但是当按Tab键时，焦点离开了文本区域或输入，其他react元素被指向。
我如何捕捉这个事件，并保持焦点到文本区域或输入，并添加一个空格的制表符大小到当前光标位置？
我试着喜欢它，但它没有帮助。

const import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [description, setDescription] = useState("It's a red color Mustang from 1964");
 
  const setCarBrand = (e) => {
    if(e.keydown == 'tab') setBrand(brand + '     '); 
    else setBrand(e.target.value);
    e.preventDefault();
  }

  const setCarDescription = (e) => {
    if(e.keydown == 'tab') setBrand(brand + '     '); 
    else setDescription(e.target.value);
    e.preventDefault();
  }

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        {description}
      </p>
      <br/>
      <label>{brand}: <label/> <input id="brand" placeholder={brand} value={brand} onChange={setCarBrand} />
      <label>{description} : <label/> <textarea id="description" placeholder={description} value={description} onChange={() => setCarDescription()} />
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

字符串