Implementing Uppy.io StatusBar in react

Question

I am trying to implement an Uppy.io statusbar upload as a react component. I tried using the wrapper but it does not work. If I use Dashboard or DragDrop then it does. Are there any tutorials or examples I could refer to ? My code looks like:

const UppyUpload = ({ uploadPayload }) => {
    const uppy = useUppy(() => {
        return new Uppy({
            meta: { CaseId: '29670', CustomerId: '107', projectTitle: 'Trial' },
            restrictions: { maxNumberOfFiles: 1 },
            autoProceed: false,
        })
            .use(XHRUpload, {
                endpoint: 'api/FormController/UploadVideo',
                formData: true,
                fieldName: 'Files',
            })
            .on('complete', (result) => {
                const url = result.successful[0].uploadURL;
                store.dispatch({
                    type: 'SET_USER_AVATAR_URL',
                    payload: { url },
                });
            });
    });
    return (
        <div>
             <StatusBar
               uppy={uppy}
               hideAfterFinish={false}
               showProgressDetails
              />
        </div>
    );
};