I have completed a form in ReactJS but since a number of the fields are similar, I was trying to refactor the code into components. Earlier on before refactoring the code into components, everything seemed to work well not until I tried creating a component for the input field.

Then typing inside the field doesn't seem to work. I suspect it has to do with the the context api being used because the value property is not set to a fixed value and also the onChange function seems to be right.

Here is my code snippet attached

Text.jsx

import React, { useContext } from "react";
import { StepperContext } from "../../../contexts/stepperContext";

export default function Text({
  width = "w-[300px]",
  src = "/person.jpg",
  alt = "image name",
  alias = "name",
  placeholder = "enter a placeholder",
}) {
  const { userData, setUserData } = useContext(StepperContext);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserData({ ...userData, [name]: value });
  };
  return (
    <div className="pt-5 self-center">
      <div
        className={`flex self-start items-center border-solid border-[1px] border-black rounded-md h-12 ${width}`}
      >
        <img className="pl-4" src={src} alt={alt} />
        <input
          onChange={handleChange}
          value={userData[{ alias }] || ""}
          className="pl-4 outline-none placeholder:capitalize placeholder:text-gray-800 placeholder:font-normal w-full pr-4"
          type="text"
          name={alias}
          id={alias}
          placeholder={placeholder}
        />
      </div>
    </div>
  );
}