'React component is changing an uncontrolled input to be controlled error

please , how can i get over this error of component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

this prevent the input field from showing what i am typing.

 const [sellerName, setSellerName] = useState();
  const [storeName, setStoreName] = useState("");

...

 <form className="registerInputContainer customerEditInput">
          <div className="regInput passForm ">
            <span className="userEmail">Owner's Full name (Required)</span>
            <div className="passwordContainer editCusInputField">
              <input
                placeholder="your name"
              
                value={sellerName }
              
                onChange={(e) => setSellerName(e.target.value)}
                className="passwordInput regInputField"
              />
            </div>
          </div>
          <div className="regInput passForm ">
            <span className="userEmail">Store Name (required)</span>
            <div className="passwordContainer editCusInputField">
              <input
                placeholder=""
                required
                
                value={storeName || ""}
                onChange={(e) => setStoreName(e.target.value)}
                className="passwordInput regInputField"
              />
            </div>
          </div>
...
        </form>


i have tried some of the solution i saw on stackoverflow but they are not working . thanks you all



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source