React-admin image upload data provider showing undefined - react-admin

Question

I'm trying to use the customDataProvider example provided by react-admin's documentation
//dataProvider.js
import simpleRestProvider from 'ra-data-simple-rest'
const dataProvider = simpleRestProvider(process.env.REACT_APP_API);
export const myDataProvider = {
...dataProvider,
update: (resource, params) => {
if (resource !== 'recipes') {
// fallback to the default implementation
return dataProvider.update(resource, params);
}
/**
* For posts update only, convert uploaded image in base 64 and attach it to
* the `picture` sent property, with `src` and `title` attributes.
*/
// Freshly dropped pictures are File objects and must be converted to base64 strings
const newPictures = params.data.pictures.filter(
p => p.rawFile instanceof File
);
const formerPictures = params.data.pictures.filter(
p => !(p.rawFile instanceof File)
);
return Promise.all(newPictures.map(convertFileToBase64))
.then(base64Pictures =>
base64Pictures.map(picture64 => ({
src: picture64,
title: `${params.data.title}`,
}))
)
.then(transformedNewPictures =>
dataProvider.update(resource, {
data: {
...params.data,
pictures: [
...transformedNewPictures,
...formerPictures,
],
},
})
);
},
};
/**
* Convert a `File` object returned by the upload input into a base 64 string.
* That's not the most optimized way to store images in production, but it's
* enough to illustrate the idea of data provider decoration.
*/
const convertFileToBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file.rawFile);
});
With this in the page / component
//recipe.js snippet
<ImageInput source="pictures" accept="image/*" multiple="true">
<ImageField source="src" title="title"/>
</ImageInput>
but the image title is showing as undefined in the PUT request body
I have also lost the ID of the item from the URL, this also shows as undefined in the PUT URL
Where am I going wrong?