I am trying to populate the data from my mock data which is in json format. When I am trying to run the component I am getting undefined reading map error. I have checked that my component is rendering with the value only. Even it's rendering with the value I am getting this undefined error. I have tried to applied conditional rendering but that doesn't help me. I checked other solutions which is having the same issue but nothing helps me. I am importing json from my local inside Any one can guide me where I am missing the point. Thanks in advance.

const createCell = cell => ({ key: cell.key, children: cell.title });

const createCellsForRow = cells => cells.map(cell => createCell(cell)); -----> I am getting error from here(undefined reading map)

const StTable = () => {
  const [selectedKey, setSelectedKey] = useState([]);

  const handleRowToggle = (event, metaData) => {
    event.preventDefault();
    if (selectedKey !== metaData.key) {
      setSelectedKey(metaData.key);
    }
  };

  const createRow = rowData => (
    {
      key: rowData.key,
      cells: createCellsForRow(rowData.cells),
      toggleAction: {
        metaData: { key: rowData.key },
        onToggle: handleRowToggle,
        isToggled: selectedKey === rowData.key,
        toggleLabel: rowData.toggleText,
      },
    }
  );

  const createRows = data => data.map(childItem => createRow(childItem));

  return (
    <Table
      summaryId="example-single-select"
      summary="This table shows an implementation of single row selection."
      numberOfColumns={4}
      cellPaddingStyle="standard"
      rowStyle="toggle"
      dividerStyle="horizontal"
      headerData={{
        selectAllColumn: {
          checkLabel: 'Single Selection',
        },
        cells: [
          { key: 'cell-0', id: 'toggle-0', children: 'Name' },
          { key: 'cell-1', id: 'toggle-1', children: 'Address' },
          { key: 'cell-2', id: 'toggle-2', children: 'Phone Number' },
          { key: 'cell-3', id: 'toggle-3', children: 'Email Id' },
        ],
      }}
      bodyData={[
        {
          rows: createRows(mockData),
        },
      ]}
    />
  );
};

export default StTable;

//MockDataSample
[
{"SNO":001, "SregID":"SOO1", "Status": "Available"},
{"SNO":002, "SregID":"SOO2", "Status": "Not Available"},
{"SNO":003, "SregID":"SOO3", "Status": "Available"},
]