Getting DevExtreme gnatt data after updating chart with React - reactjs

Question

So basically, how do I get the new data from the DevExtreme Chart after making an update? I just want to get the the task data so that I can then upload it to my database. The
DevExtreme documentation isn't helping at all in relation to listening to changes made and getting the new data when the change has been made. I tried using onOptionChanged but the only outputs I can get ar HTML elements.
import React from 'react'
import { dependencies, tasks } from '#/data/data'
import Gantt, { Tasks, Dependencies, Toolbar, Item, Column, Validation, Editing } from 'devextreme-react/gantt'
const GanttChart = () => {
return (
<div>
<h5 className="font-medium leading-tight text-xl mt-0 mb-2 text-blue-600">Set Timeline Chart</h5>
<p className="italic">Edit by clicking either the chart or the the table values</p>
<Gantt
taskListWidth={500}
scaleType="quarters"
onOptionChanged={e => console.log(e)}
height={700}>
<Tasks dataSource={tasks} />
<Dependencies dataSource={dependencies} />
<Toolbar>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item name="collapseAll" />
<Item name="expandAll" />
<Item name="separator" />
<Item name="addTask" />
<Item name="deleteTask" />
<Item name="separator" />
<Item name="zoomIn" />
<Item name="zoomOut" />
</Toolbar>
<Column dataField="title" caption="Subject" width={300} />
<Column dataField="start" caption="Start Date" />
<Column dataField="end" caption="End Date" />
<Validation autoUpdateParentTasks />
<Editing enabled />
</Gantt>
</div>
)
}
export default GanttChart