javascript——如何在表格（新组件）中显示多步骤表单填写的输入？

如何在表格中显示（在新组件中）多步骤表单中填写的输入（此处为名称）？顺便说一句，我无法在输入框中输入任何文本。我可以看到光标，但无法键入任何文本。我试过了defaultValue，但当我转到下一页并重新回到上一页时，内容不会被保存。。。

以下是表格：

import { useStepperContext } from "../Pages/Stepper/StepperContext";

export default function Information() {
    const { userData, setUserData } = useStepperContext();

    const handleChange = (e) => {
        const { name, value } = e.target;
        setUserData({ ...userData, [name]: value });
    };    
    return (
        <div className="flex flex-col ">
            <div className="mx-2 w-full flex-1">
            <div className="mt-3 h-6 text-xs font-bold uppercase leading-8 text-gray-500">
                Your name
            </div>
            <div className="my-2 flex rounded border border-gray-200 bg-white p-1">
                <input
                    onChange={handleChange}
                    value={userData["name"] || ""}
                    name="Name"
                    placeholder="Name"
                    className="w-full appearance-none p-1 px-2 text-gray-800 outline-none"
                />
            </div>
        </div>
     </div>
)}