//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>
Use defaultValue={groupChatName} attribute instead of the value attribute.
You can reference the docs here...uncontrolled-components
Hope this helped 😁
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("");