Expect following JSON(mention in image) as output using react-admin framework - react-admin

Question

Below is the my code or react component:-
import { Box } from '#material-ui/core';
import React,{ useEffect, useState } from 'react'
import {
Create,
SimpleForm,
TextInput,
TextField,
ArrayInput,
SimpleShowLayout,
SimpleFormIterator,
RadioButtonGroupInput,TopToolbar
} from 'react-admin'
import "../index.css"
const JobCreate = (props) => {
const types = [
{id:'default'},
{id:'custom'}
];
const [checked,setChecked] = useState(true);
const onClickType = (id) => {
(id === "custom") ? setChecked(false) : setChecked(true)
}
return (
<Create title='Create an Job' {...props}>
<SimpleForm>
<TextInput source='source' />
<TextInput source='destination' />
<RadioButtonGroupInput label="Type"
source="custom"
choices={types}
optionText="id"
onChange={onClickType} />
<RadioButtonGroupInput source="category" choices={[
{ id: 'default', name: 'default' },
{ id: 'custom', name: 'custom' },
]} />
{!checked && (
<SimpleShowLayout source="video">
<TextInput label='voice' name="codec" required />
</SimpleShowLayout>
)}
{ !checked && (
<ArrayInput source="Profiles">
<SimpleFormIterator disableReordering>
<TextInput label='Name' source="Name" required />
<TextInput label='Profile' source="profile" required />
</SimpleFormIterator>
</ArrayInput>
)}
{!checked && (
<SimpleShowLayout source="audios">
<TextInput label='audio1' required />
<TextInput label='audio2' required />
</SimpleShowLayout></source>
)}
</SimpleForm>
</Create>
)
}
export default JobCreate
I want to create complex UI using the react-admin framework, I have created the UI but when hit the save button, not getting actual or expected JSON in the output while sending to the api.
I tried so many ways, but no luck, Hence posting this question.
Here is the documentation link : https://marmelab.com/react-admin/Readme.html