How to solve Warning: React does not recognize the X prop on a DOM element

I'm using a thing called react-firebase-js to handle firebase auth, but my understanding of react and of the provider-consumer idea is limited.

I started with a built a very big JSX thing all at the top level, and that works without warnings. But when I try to break it into components, I got the warning shown in the title and a few others.

This works without warning...

// in App.js component  render() {    return (<header className="App-header"><img src={logo} className="App-logo" alt="logo" /><FirebaseAuthConsumer>                {({ isSignedIn, user, providerId }) => {                    if (isSignedIn) {                        return (                           // ui for signed in user                        );                      } else {                        if (this.state.confirmationResult) {                            return (                                // ui to get a phone number sign in                            );                        } else {                                              return (                                // ui to verify sms code that was sent                            );                        }                    }                }}</FirebaseAuthConsumer></header>    );  }

But this, better design, I thought, generates errors/warnings...

// in App.js componentrender() {    return (<MuiThemeProvider><FirebaseAuthProvider {...config} firebase={firebase}><div className="App"><IfFirebaseAuthed><p>You're authed buddy</p><RaisedButton label="Sign Out" onClick={this.signOutClick} /></IfFirebaseAuthed><IfFirebaseUnAuthed><Authenticater />  // <-- this is the new component</IfFirebaseUnAuthed></div></FirebaseAuthProvider></MuiThemeProvider>    );  }// in my brand new Authenticator component...  render() {    return (<header className="App-header"><img src={logo} className="App-logo" alt="logo" /><FirebaseAuthConsumer>                {({ isSignedIn, user, providerId }) => {                    if (isSignedIn) {                        return (<div><pre style={{ height: 300, overflow: "auto" }}>                            {JSON.stringify({ isSignedIn, user, providerId }, null, 2)}</pre></div>                        );                      } else {                        if (this.state.confirmationResult) {                            return (                                // ui to get a phone number sign in                            );                        } else {                                              return (                                // ui to verify an sms code that was sent                            );                        }                    }                }}</FirebaseAuthConsumer></header>    );  }

The errors/warnings look like this...

[Error] Warning: React does not recognize the isSignedIn prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase issignedin instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Warning: React does not recognize the providerId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase providerid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[Error] Error: Unable to load external reCAPTCHA dependencies! (anonymous function) (0.chunk.js:1216) [Error] Error: The error you provided does not contain a stack trace.

Am I misunderstanding how to use provider-consumers, or is there an error in the react-firebase code, or am I doing some other thing wrong? Thanks.