Не могу изменить поля ввода в React js

Родительский компонент, как показано ниже, я установил состояние в ContentLeft, когда Edit ЭкспертизаПравить

class Dashboard extends React.Component {
  state = {
    name: 'Your Name',
    title: 'job Title',
    email: 'Your Email',
    experience: 'Your Experience',

    languages: 'languages that used',
    tools: 'tools that used',
    knowledgeareas: 'your knowledge areas'
  };


  handleChangeEvent = event => {
    this.setState({
      [event.target.name]: event.target.value,
      [event.target.title]: event.target.value,
      [event.target.email]: event.target.value,
      [event.target.experience]: event.target.value
    })
  }

  handleChangeEventExpertise = event => {
    this.setState({
      [event.target.languages]: event.target.value,
      [event.target.tools]: event.target.value,
      [event.target.knowledgeareas]: event.target.value
    })
  }

  render() {
    var gridStyle = {
      padding: '10px',
      height: '300px',
      resize: 'auto',
      overflow: 'auto'
    }
    return (
      <div>
        <Grid container>
          <ItemGrid xs = {6}>
              <ProfileHeader {...this.state}/>
              <Grid container>
                <Grid item xs = {6}>
                  <ContentLeft {...this.state}/>
                </Grid>
              </Grid>
          </ItemGrid>
          <ItemGrid xs = {6}>
            <HeaderEdit onChange = {this.handleChangeEvent} {...this.state} />
            <ExpertiseEdit onChange = {this.handleChangeEventExpertise} {...this.state} />
          </ItemGrid>
        </Grid>
      </div>
    );
  }
}

Компонент ЭкспертизаПравить, как показано ниже

class ExpertiseEdit extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Typography variant = "headline">Expertise Edit</Typography>
        <FormControl fullWidth className = {classes.formControl}>
          <InputLabel htmlFor = "languages-simple">Languages</InputLabel>
          <Input name = "languages" value = {this.props.languages} id = "languages-simple" onChange = {this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className = {classes.formControl}>
          <InputLabel htmlFor = "tools-simple">Development Tools</InputLabel>
          <Input name = "tools" id = "tools-simple" value = {this.props.tools} onChange = {this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className = {classes.formControl}>
          <InputLabel htmlFor = "knowledgeareas-simple">Knowledge Areas</InputLabel>
          <Input name = "knowledgeareas" id = "knowledgeareas-simple" value = {this.props.knowledgeareas} onChange = {this.props.onChange}/> 
        </FormControl><br></br>
      </div>
    );
  }
}

Компонент ContentLeft, как показано ниже

function ContentLeft(props) {
  const { classes } = props;
  return (
    <div>
        <Typography variant = "subheading" color = "textSecondary">
        {props.languages}
        </Typography>
        <Typography variant = "subheading" color = "textSecondary">
        {props.tools}
        </Typography>
        <Typography variant = "subheading" color = "textSecondary">
        {props.knowledgeareas}
        </Typography>
    </div>
  );
}

почему он не меняется при изменении текста редактирования Другие компоненты (ProfileHeader и HeaderEdit) работают так

What did I do wrong Please help me with this