react-admin - add Multiple records at one in Create view

I'm trying to create multiple posts at once in a react-admin Create view. It's similar to one-to-many whereby one author can create multiple posts at once in a Create component in react-admin. I haven't found a working way when using a TabbedForm.The reason being when you fill a single field, it autocompletes on the other TabbedForm since the TextInput relate to the same source name.I would like to know how to handle multiple form inputs using React-Admin Tabs without having to render the inputs twice.

Here is the source code

import * as React from "react";
import { 
  List,
  Create,
  ArrayInput,
  SimpleFormIterator,
  TextInput,
  DateInput, 
  Datagrid, 
  TextField,
  DateField, 
  Admin, 
  Resource,
  TabbedForm,
  FormTab
  } 
from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

//read ops
export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="body" />
            <DateField source="published_at" />
        </Datagrid>
    </List>
);

//create ops
export const PostCreate = (props) => (
  <Create {...props}>
  <TabbedForm>
      <FormTab label="single Post">         
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
      </FormTab>
      <FormTab label="Multiple Post">
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
          <ArrayInput source="posts">
              <SimpleFormIterator>
                <TextInput variant="outlined" label="title" source="title" />
                <TextInput variant="outlined" label="body" source="teaser" />
                <DateInput variant="outlined" label="Publication date" source="published_at" />
              </SimpleFormIterator>
          </ArrayInput>
      </FormTab>

  </TabbedForm>
</Create>
);



//main
const App = () => (
    <Admin title="ubeezy blog" dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource name="posts" list={PostList} create={PostCreate} />
    </Admin>
);

export default App;

PostCreate component is relevant here since I have Single and Multiple post creations of which when creating a single post, it picks up the input details and reflects on Multiple post creation tab fields.

Interactive demo at codesandbox:

https://codesandbox.io/s/ra-multiple-form-creation-1ecmi?file=/src/App.js

I'd appreciate the help.