how to read JSON value from dataSource API

[chzh2839]

Version : ^4.21.21

Development Environment : Windows OS, Chrome browser, React, Typescript

Current Behavior

I tried to use specific value of JSON , which is from dataSource API, in Grid. But, 'Property does not exist' error message is shown up.

The api response data type sample is below:

{
        'key1': 'value1',
        'key2': 'value2',
        'key3': [
            {'options-child1': 'value3'}, 
            {'options-child2': 'value4'}
        ],
       'key4': {
           'children': 'value5'
        }
      },

I use as below : CASE 1 ) using in 'name'

{
        header: 'gridColumnName',
        name: 'key4.children',
        align: 'center',
},

=> I can't make show up 'value5' text on Grid. It shows empty value..

CASE 2 ) trying to use 'OnClick'

const handleClick = useCallback(
    ({ targetType, columnName, instance, rowKey }: GridEvent) => {
      const rowKey_key3 = instance.getValue(rowKey, 'key3') //   on Console, rowKey_key3 shows '[object Object],[object Object]'.

     const array = Array.from(rowKey_key3 as string)
     array.forEach(ele => {
        console.log(`ele : ${ele.options-child1 as string}`) // this is error point
      })
    },
    []
  )

=> I can't get 'options-child1' value...

I want to know how to handle JSON data with multiple depth, in Tui-Grid.