Javascript TextField-如何从状态属性呈现defaultValue文本？

我正在为我的应用程序使用Mui/React。我正在尝试显示输入字段的默认文本。但是，渲染会导致“我的状态”值无法正确显示。堆栈上有一些关于这个的帖子，但我真的无法让它们中的任何一个正常工作，而且我也找不到功能组件示例

以下是我如何使用defaultValue：

                            <TextField
                                id="name"
                                value={name}
                                name="name"
                                onChange={handleChange}
                            />

我没有得到任何错误，我只是不能让defaultValue的功能为我的案例工作

这是我的密码：

xport const EditBucketPopUp = (props) =>
{
    const { open, handleClose, name, about, id, dispatchMessage } = props

    const [ apiErrorName, setApiErrorName ] = useState(null)
    const [ apiErrorAbout, setApiErrorAbout ] = useState(null)


    const initialFormData = Object.freeze({
        name: {name},
        about: {about},
    });
    
    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (value, e) => {
        updateFormData({
            ...formData,
            // Trimming any whitespace
            [e.target.name]: e.target.value.trim(),
        });
    };
    


    const handleSubmit = (e) => {
        e.preventDefault();
        setApiErrorName(null)
        setApiErrorAbout(null)

        axiosInstance
            .patch(`create/bucket/`, {
                name: formData.name,
                about: formData.about,
            })
            .then((res) => {
                if (
                    res.status === 201
                ) {
                    getAllBuckets(dispatchMessage);
                };
            })
            .catch(err =>
                {
                    setApiErrorName(err.response.data.name);
                    setApiErrorAbout(err.response.data.about);
                }
                )
    };


  
    return (
        <>
            <Grid>
            <Dialog>
                <DialogActions>
                    <Grid>
                            <Grid>
                                <form>
                            <TextField
                                id="name"
                                label="Bucket Name"
                                defaultValue={name}
                                name="name"
                                onChange={handleChange}
                            />
                            <FormHelperText>
                                    { apiErrorName &&
                            <div>
                            <WarningIcon />    
                            <Typography> Name:</Typography>
                            <Typography> {apiErrorName} </Typography>
                            </div>
                        }     
                            </FormHelperText>
                        </form>
                            </Grid>
                    <Grid item xs={10} sm={10}>
                    <form>
                    <TextField
                    id="about"
                    label="About"
                    name="about"
                    defaultValue={about}
                    onChange={handleChange}
                    />
                        <FormHelperText>                        {
                    apiErrorAbout &&
                    <div>
                        <WarningIcon/>
                        <Typography > Description:</Typography>
                        <Typography> {apiErrorAbout} </Typography>
                    </div>
                }</FormHelperText>
                    </form>
                            </Grid>

            
                        <Grid>
                            <Button
                                onClick={function (event) {handleSubmit(); handleClose() }}
                            >
                                make edits
                            </Button>
                        </Grid>
                        <Grid>
                            <Button
                                onClick={handleClose}
                            >
                                Nevermind...
                            </Button>
                        </Grid>
                    </Grid>
                </DialogActions>
                </Dialog>
                </Grid>
        </>
    );
}

xport const EditBucketPopUp=（道具）=>
{
const{open，handleClose，name，about，id，dispatchMessage}=props
常量[apiErrorName，setApiErrorName]=useState（null）
常量[apiErrorAbout，setApiErrorAbout]=useState（null）
const initialFormData=Object.freeze({
名称：{name}，
关于：{about}，
});
const[formData，updateFormData]=useState（initialFormData）；
常量handleChange=（值，e）=>{
updateFormData({
…表格数据，
//删除任何空白
[e.target.name]：e.target.value.trim（），
});
};
常量handleSubmit=（e）=>{
e、 预防默认值（）；
setApiErrorName（空）
setApiErrorAbout（空）
轴位
.patch（`create/bucket/`{
名称：formData.name，
关于：formData.about，
})
。然后（（res）=>{
如果(
res.status==201
) {
GetAllBucket（dispatchMessage）；
};
})
.catch（错误=>
{
setapierrname（err.response.data.name）；
setApiErrorAbout（err.response.data.about）；
}
)
};
返回(
{apErrorName&&
姓名：
{apErrorName}
}     
{
关于&&
说明：
{apiErrorAbout}
}
编辑
没有关系。。。
);
}

感谢您对我如何将状态显示为默认文本的指导