issue: Using allowClear function of antd select components does not reset value

[Najind]

{
id: "groupType",
name: "Group Type",
cell: (row, idx) => {
console.log("row.answerGroup:", row.answerGroup);
console.log("surveyQuestion.questionType:", surveyQuestion.questionType);
console.log("row.groupType:", row.groupType);
console.log("row.att:", row.attribute);
console.log("row.value:", row.parameterValue);
return true ||
(surveyQuestion.questionType &&
surveyQuestion.questionType !== "" &&
row.groupType &&
row.groupType?.length > 0) ? (
<Form.Group className="qwe123">
<Select
className="w-100"
style={{ height: 40, width: 100 }}
disabled={
!canEdit ||
!surveyQuestion?.questionType ||
surveyQuestion?.questionType === "" ||
row?.groupType?.length === 0
}
readOnly={
!canEdit ||
!surveyQuestion?.questionType ||
surveyQuestion?.questionType === "" ||
row?.groupType?.length === 0
}
value={surveyQuestion.questionType == "SURVEY_OTHER"
? row.answerGroup || row.groupType[0].code
: row.answerGroup || undefined}
onChange={(e) => {
surveyQuestionAnswersChange(e, idx, "answerGroup");
}}
placeholder="พิมพ์เพื่อค้นหา"
showSearch
allowClear
filterOption={(input, option) =>
option?.children.toLowerCase().includes(input.toLowerCase())
}
>

Select...

{row.groupType?.map((val) => (

{val.code}

))}

</Form.Group>
) : null;
},
center: "true",
className: "border-item",
},