Usage as per Javascript example causes error

[SomervilleTom]

I have a React component (using the MUIv5 styling framework) that works prior to my attempt to incorporate ReactImageUploading.

I have wrapped the (functional) component in ReactImageUploading as per the example code. When the code attempts to render this change, the result is Uncaught TypeError TypeError: children is not a function error.

The failing code is in the index.js component of react-images-uploading.

Here is the way I attempt to use the component:

  return (
    <DialogContent>
      <Stack
        spacing={2}
      >
        <ImageUploading
          value={images}
          onChange={onImageListChange}
          maxNumber={MAXIMUM_IMAGE_COUNT}
          dataURLKey="data_url"
          acceptType={["jpg"]}
        >
        {({
            imageList,
            onImageUpload,
            onImageRemoveAll,
            onImageUpdate,
            onImageRemove,
            isDragging,
            dragProps
        }) => (
          <Box
            sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            <Avatar
              alt="Avatar image"
              src={avatarURL}
              sx={{ width: 256, height: 256 }}
            />
          </Box>
        )};
        </ImageUploading>
        <Typography
          variant="h6"
          component="p"
          align='center'
        >
          Drag photo here
        </Typography>
        <Typography
          variant="body2"
          align='center'
        >
          -- or --
        </Typography>
        <Box
          sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
        >
          <PersonaPictureUploadButton
            personaPictureUpload={personaPictureUpload}
          />
        </Box>
      </Stack>
    </DialogContent>
  );

Here is the specific complaint:

Uncaught TypeError TypeError: children is not a function
    at ReactImageUploading (/home/tms/frontend/browser/node_modules/react-images-uploading/dist/index.js:224:1)
    at renderWithHooks (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:14985:1)
    at mountIndeterminateComponent (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:17811:1)
    at beginWork (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:19049:1)
    at callCallback (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:3945:1)
    at invokeGuardedCallbackDev (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:3994:1)
    at invokeGuardedCallback (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:4056:1)
    at beginWork$1 (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:23964:1)
    at performUnitOfWork (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:22776:1)
    at workLoopSync (/home/tms/frontend/browser/node_modules/react-dom/cjs/react-dom.development.js:22707:1)

I'm using React v17.0.1.

[Happy-Child]

does the component work if only it is left? Without MUI

[SomervilleTom]

does the component work if only it is left? Without MUI

I'm digging into that now, I'll update this when I have more information.