Need to do Radio button in antd default checked

Question

I have a Radio Button Group with dynamically data coming from an array. Here's the code :

<Radio.Group
    options={uniqueRadioElements}
    onChange={onCategorySelect}
    value={selectedCategory}
    optionType="button"
    buttonStyle="solid"
    className="select-category"
    checked="true"
/>
<Col span={24}>
    <div className="professionals-wrapper">
        {arrayOfElements
            .filter((item) => item.category === selectedCategory)
            .map((item) => {
                return (
                    <div className="details-of-categories">
                        <Image
                            src="/images/clinic.png"
                            preview={false}
                            alt="photo 4"
                        />
                        <h3>{item.title}</h3>
                        <Rate defaultValue={4} disabled />
                    </div>
                )
            })}
    </div>
</Col>

I want to make it default checked for a specific element of Radio Button Group

Answer 1

You can add the prop defaultChecked to the specific index you want. An example for the first one would be:

<input defaultChecked={index === 0} />

In your case I would delete the checked value and add the defaultChecked.

<Radio.Group 
  options={uniqueRadioElements} 
  onChange={onCategorySelect} 
  value={selectedCategory} 
  optionType="button" 
  buttonStyle="solid" 
  className="select-category" 
  defaultChecked={index === 0} />