Antd: set default value / setFieldsValue for Cascader when opening Modal - reactjs

Question

I have Antd's Cascader like this:
When I click on Edit button it open modal as below.
const showModal = (record) => {
console.log('record', record); // this is current record which has existing value to be displayed in cascader
form.setFieldsValue(record);
setVisible(true);
};
how do I feed initial values or existing values to Cascader?
<Cascader
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
options={propertyOptions}
loadData={loadCompanies}
onChange={onChange}
changeOnSelect
/>
using defaultValue prop like does not seem to work.
When I load propertyOptions, it loads with values like
property1,
property2
When I click on property1 it loads children dynamically.
so selected value is e.g. property1 > company1
but When I click on Edit modal it has only parent values. (children won't be there as I load them on parent click).
When I click on modal it has the whole item data so maybe I can use it to show like hardcoded value or something?
UPDATE:
This is how I fill propertyOptions
function setPropertiesAsOptions(propertiesQuerySnapshot) {
propertiesQuerySnapshot.forEach((doc) => {
options.push({
value: doc.id,
label: doc.data().propertyName,
isLeaf: false,
});
});
setPropertyOptions(options);
}

Answer 1

Is there propertyOptions has value names like zhejiang or other?
In your case this data should work properly as options
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
So it's mean that value name should be the same as params in defaultValue