无法更改React JS中的输入字段

像下面这样的父组件,我已经将状态设置为 剩余内容 编辑时 专家编辑

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'
  };


  handleChange = 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
    })
  }

  handleChangeExpertise = 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.handleChange} {...this.state} />
            <ExpertiseEdit onChange={this.handleChangeExpertise} {...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>
    );
  }
}

剩余内容 组件如下

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>
  );
}

当我更改编辑文本时为什么它不更改其他组件( 配置文件标题和标题编辑 )像这样工作

我做错什么了请帮我