A component is changing an uncontrolled input to be controlled. This is likely caused by the value c-CodePudding

//constructor which i have initialised before only.

const [groupChatName, setGroupChatName] = useState();

// updated part where values is showing that it is undefined and it is changing from uncontrolled to controlled

<FormControl d="flex">
          <Input
            placeholder="Group Name"
            mb={3}
            value={groupChatName}
            onChange={(e) => setGroupChatName(e.target.value)}
          />
          <Button
            variant="solid"
            colorScheme="teal"
            ml={1}
            isLoading={renameloading}
            onClick={handleRename}
          >
            Update
          </Button>
        </FormControl>

CodePudding user response：

You are passing undefined to the value prop in the Input component and then changing it to string on change.

Provide a initial value in useState

const [groupChatName, setGroupChatName] = useState("");

CodePudding user response：

Use defaultValue={groupChatName} attribute instead of the value attribute. You can reference the docs here...uncontrolled-components

Hope this helped