Implementing Uppy status bar in react

Hi I am trying to create a react component using Uppy status bar. Are there any example code sandboxes I could look at ? The component renders an empty page and I cant figure out why. If I replace the Status bar wrapper with DrapDrop then it works. My component code looks like:

const UppyUpload = ({ uploadPayload }) => {
	const [uppy] = useState(
		new Uppy({
			meta: { CaseId: '29670', CustomerId: '107', projectTitle: 'Trial' },
			restrictions: { maxNumberOfFiles: 1 },
			autoProceed: true,
			.use(XHRUpload, {
				endpoint: 'api/FormController/Upload',
				formData: true,
				fieldName: 'Files',
			.on('complete', (result) => {
				const url = result.successful[0].uploadURL;
					type: 'SET_USER_AVATAR_URL',
					payload: { url },

	return (

Am new to Uppy and any help would be appreciated.

I haven’t used status bar standalone so I’m not sure. Unfortunately I think the component is relatively tightly coupled to Dashboard and DragDrop. But I can at least tell you that you shouldn’t put uppy in state but rather use our hook: Initializing Uppy — Uppy