Tidak bisa menampilkan nilai props pada komponen dengan react dan redux

Gan mau nanya kenapa yah saya tidak bisa menampilkan nilai props yang dipassing dari komponen login ke komponen header?jadi saya mau ngasih nilai email di komponen header di tag ini:

<h1>Selamat datang {this.props.accounts}</h1>

nah nilai email tersebut didapat dari komponen login yang nilai emailnya di input oleh user. Barangkali ada yang bisa bantu dan kodingannya lengkap ada dibawah,dan maaf kalo sedikit berantakan kodingannya soalnya baru belajar react sama redux.trims gan. App.js

import React,{Component} from 'react';
import {connect} from "react-redux";
import {addAccount} from "./states/action";
import Ibisminilogo from "./Components//img/ibis-minilogo.png";
import Logo_login from "./Components/img/logo-ibis.png";
import "./Components/style.css";
import Menu from "./Components/img/menu.png";

class Login extends Component{
  constructor(props){
      super(props)
      this.state = {
          email : "",
          password : ""
      }
  }

  onChange = (event) => {
      var user = event.target.name;
      var pass = event.target.value;
      this.setState({[user]:pass});
  }

  diSubmit = () => {
      let email = this.state.email;
      let password = this.state.password;
      const {addNewAccount} = this.props;
      if(!email || !password){
          alert("Isi Email dan Password anda");
          return;
      }
      this.setState({email:"",password:""});
      addNewAccount({email,password});
  }
  render(){
      return(
          <div className="big-login">
              <img src={Logo_login} className="Logo_login" alt=""/>
              <div className="login">
                  <div className="title-login">
                      <p>Masukan Email dan password kode kamar yang sudah terdaftar</p>
                  </div>
                  <form>
                      <p>Email : </p>
                      <input type="text" className="form-content" name="email" value={this.state.email} onChange={this.onChange}/>
                      <div className="form-border"></div>
                      <p>Password : </p>
                      <input type="password" className="form-content" name="password" value={this.state.password} onChange={this.onChange}/>
                      <div className="form-border"></div>
                      <br/>
                      <button className="button-login" onClick={this.diSubmit}>Login</button>
                  </form>
              </div>
          </div>
      )
  }
}

class Header extends Component{
  render(){
      return(
          <div>
              <header>
                  <img src={Ibisminilogo} className="Ibisminilogo" alt="" />
                  <nav className="dropdown">
                      <img src={Menu} className="menu" alt="" />
                      <ul className="isi-dropdown">
                          <li>Beranda</li>
                          <li>Menu</li>
                          <li>Status</li>
                      </ul>
                  </nav>
                <h1>Selamat datang {this.props.accounts}</h1>
              </header>
          </div>
      );
  }
}

class App extends Component{
    render(){
        return (
          <div className="App">
            <Header/>
            <Login/>
          </div>
        )
    }
}
//Mengambil state dari store dan mempassingnya ke
//Component header dalam bentuk props
//memanggil state pada store untuk setiap kali ada perubahan dalam bentuk objek data
function mapStateToProps(state){
  return{
    accounts : state.accounts.email
  }
}

//membuat fungsional yang membutuhkan fungsi dispatch
function mapDispatchToProps(dispatch){
  return{
  addNewAccount : Account => {
    dispatch(addAccount(Account));
    }
  }
}

//connect untuk membaca nilai dari store
export default connect(mapStateToProps,mapDispatchToProps)(App);

action.js

let currentId = 0;
export const ADD_ACCOUNT = "ADD_ACCOUNT";

//action creators
export function addAccount(Account){
    const {email,password} = Account;
    currentId+=1;

    return{
        type:ADD_ACCOUNT,
        id:currentId,
        email,
        password
    };
}

reducer.js

import {combineReducers} from "redux";
import {ADD_ACCOUNT} from "./action";

function accounts(state = {email : "",password : ""},action){
    switch(action.type){
        case ADD_ACCOUNT:
            return[ /////sample
                ...state,
                {
                    id:action.id,
                    email:action.email,
                    password:action.password
                }
            ];
        default:
            return state;
    }
}

const reducers = combineReducers({
    accounts
});

export default reducers;

index.js

import ReactDOM from 'react-dom';
import App from "./App";
import {Provider} from "react-redux";
import {createStore} from "redux";
import reducers from "./states/reducer";

//buat store dari reducers
const store = createStore(reducers);

ReactDOM.render(
    //buat store ada untuk semua container component
    //tanpa mempassing secara langsung
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);