I have a react component and a convenience function for printing it down wrapped in an ant design <Col> and <Form.Item> for easy use in form building, but no matter what gets passed for the “value” property on the <YesNoColumn>, it always renders as if it were passed true. Chatgpt just suggested the useEffect addition, but that didn’t fix anything.

Can anyone help me out with why my component won’t render the [false] variant? It displays the green checkmark even when I manually set its value with <YesNoIcon value={false} />

export const YesNoIcon = ({ value = true, fontSize = '24px', onChange }) => {
const [toggled, setToggled] = useState(value);
useEffect(() => {
    setToggled(value);
}, [value]);
const triggerChange = (changedValue: boolean) => {
    onChange?.(changedValue);
};
const toggle = () => {
    setToggled(!toggled);
    triggerChange(!toggled);
}
return toggled ?
    <CheckCircleFilled style={{ color: 'green', fontSize: fontSize }} onClick={toggle} onChange={toggle} /> :
    <CloseCircleFilled style={{ color: 'red', fontSize: fontSize }} onClick={toggle} onChange={toggle} />
};

export const graphicalYesNoField = (name: string, label: string, initially: boolean = true, columnSpan: number = 8, fontSize: string = '24px'): React.ReactNode => {
    return <Col span={columnSpan}>
        <Form.Item name={name} label={label}>
            <YesNoIcon value={initially} fontSize={fontSize} />
        </Form.Item>
    </Col>
};

Note that this is only a problem for me when I’m trying to show the “Create New” form rather than an “Update Existing”. When I’m updating an existing record, the form sets these <YesNoIcon> form items appropriately based on what’s coming back from useForm(). It’s only when I’m creating a new record that it just always falls back on the default value, even when I’m explicitly setting it to false for one of them.