The <DialogContent> accept multiple children (example).

This is causing the error:

    <DialogContent dividers>
      {loading && <Stack alignItems='center'>
        <CircularProgress />
      </Stack>}

      {error && <AlertErrorFallback error={error as any} />}

      {undefined !== customer &&
        <ErrorBoundary FallbackComponent={AlertErrorFallback}>
          <CustomerDetailsList customer={customer} />
        </ErrorBoundary>
      }
    </DialogContent>

I have no clue. Removing {error && ...} seems to solve the problem. These values come from a custom hook:

const { get, loading, error, data: customer } = useCustomer();

• loading is true o false depending of the async fetch operation
• error is null or the Error istance if any
• data is undefined or a object

CodePudding user response：

the type of error might be unknown . you can use use a fragment to wrap the component

change :

 {error && <AlertErrorFallback error={error as any} />}

to :

 <>{error && <AlertErrorFallback error={error as any} />}</>