Received `false` for a non-boolean attribute `loading`

Your problem is that you are passing all your props to the Button component. Remove {...props} from <Button /> and declare the attributes separately.

Looking at the documentation, you can see that loading it is not an attribute on the Button component, but the spread operator ... still add it.

<div className="button-container">
      <Button disabled={disabled === true || loading === true} />
      {loading === true && <CircularProgress size={24} className="button-progress" />}
    </div>
  )

Also, as a side note, I recommend that you use the === identity operator instead of the == equality operator. See this post Which equals operator (== vs ===) should be used in JavaScript comparisons?

You shouldn't pass your custom props down to the Button.

Replace

const { disabled, loading } = props

with

const { disabled, loading, ...rest } = props

and then

<Button {...rest} disabled={disabled || loading}/>