这很难用语言来描述，但这里有一张图片，展示了我试图描述的here the input stops
这是开发工具显示给我的edge dev tools
我正在使用react的材质UI输入组件，文本光标由于某种原因中途停止
这是我认为有问题的代码：

<Input sx={{ input: {color: "white"} }}  color="primary" type="text" placeholder="name" onChange={(e) => setName(e.target.value)} value={name} />

整个组件代码：

import { useState } from "react";
import styles from "./name.module.css";
import Button from '@mui/material/Button';
import { Input } from "@mui/material";

const Name = ({ btnClick }) => {
  const [name, setName] = useState("");
  const [empty, setEmpty] = useState("");
  const handleSubmit = () => {
    setName("");
    if (name === "") {
      setEmpty("cannot be empty");
    } else {
      btnClick(name);
    }
  };

  return (
    <div className={styles.main}>
      <h2>Enter a name</h2>
      <Input sx={{ input: {color: "white"} }}  color="primary" type="text" placeholder="name" onChange={(e) => setName(e.target.value)} value={name} />
      <Button onClick={handleSubmit} variant="contained">submit</Button>
      <h3 className={styles.empty}>{empty}</h3>
    </div>
  );
};

export default Name;

我试着查看开发工具以找到它是什么属性，并开始取消选中所有内容以查看它是否会扩展，但它没有扩展，或者我错过了一些东西