Поставщик контекста не работает в React.js

import React, {Component} from 'react';

const Context = React.createContext();

export class Provider extends Component {
    state = {
        contacts: [{
            id: 1,
            name: "dasd B",
            email: "[email protected]",
            phone: "dsadas"
        }
    };

    render() {
        debugger
        return (
            <Context.Provider value = {this.state}>
                {this.props.childern}
            </Context.Provider>
        );
    }
}

export const Consumer = Context.Consumer;

import React, { Component } from 'react';
import Header from './components/Header';
import Contacts from './components/Contacts'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from './Context'

class App extends Component {
  render() {
    return (
      <Provider>
          <div className = "App">
            <div className = "container">
                <Contacts />
            </div>
        </div>
      </Provider>
    );
  }
}

export default App;

import React, { Component } from 'react'
import Contact from './Contact';
import { Consumer } from '../Context';

class Contacts extends Component {

    deleteContact = id => {
        const { contacts } = this.state;
        const newContacts = contacts.filter(contact => contact.id!== id);
        this.setState({
            contacts: newContacts
        });
    };

    render() {
        debugger
        return(
            <Consumer>
                {value => {
                    const { contacts } = value;
                    return (
                    <React.Fragment > 
                         {contacts.map(contact => ( 
                                    <Contact 
                                        key = {contact.id}
                                        contact = {contact} 
                                        deleteClickHandler = {this.deleteContact.bind(this, contact.id)}> 
                                    </Contact>
                                ))}
                    </React.Fragment>
                    );
                }}
            </Consumer>
        );
    }
}

export default Contacts;

  import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  
  
class Contact extends Component {

    state = {
        showContactinfo : false
    };

    onDeleteClick = () => {
      this.props.deleteClickHandler();
    }

    onEditClick() {

    }
    render() {
        const { name, email, phone } =this.props.contact;
        const { showContactinfo } = this.state;
      return (
        <div className = "card card-body mb-3">
          <h4>{name}
            {showContactinfo ? (
            <div className = "float-right">
              <i
               onClick= {this.onEditClick}
               style = {{cursor: 'pointer', fontSize: 'medium'}} 
               className = "fas fa-edit mr-3"></i>
              <i
              onClick= {this.onDeleteClick}
              style = {{cursor: 'pointer', fontSize: 'medium'}} 
              className = "fa fa-trash-alt"></i>
            </div>): 
            <i className = "fa fa-sort-down float-right" 
            style = {{cursor: 'pointer'}} 
            onClick = {() => 
              this.setState({ showContactinfo: !this.state.showContactinfo})}></i>}
            
          </h4>
          {showContactinfo ? (
          <ul className = "list-group">
              <li className = "list-group-item">Email: {email}</li>
              <li className = "list-group-item">Phone: {phone}</li>
          </ul>) : null}
        </div>
      )
    }
  }
  
  Contact.propTypes = { 
      contact: PropTypes.object.isRequired,
      deleteClickHandler: PropTypes.func.isRequired
  }

  export default Contact;