Collapse Issue with Bootstrap

So I’ve basically finished FCC’s RecipeBox using Redux

The only thing I am having trouble is to keep track of the panel’s collapse state.

In other words, every time I change the app’s state (whether from adding, deleting, or editing a recipe), it re-renders the page and every panel uncollapse it.

I’ve taken look at the React-Bootstrap Document but I cannot figure it out.

My current code does not work when applying a state for each recipe items

src/containers/recipebox

class RecipeBox extends Component {
  constructor(props){
    super(props);
    this.state = {open: false}
    this.renderRecipeList = this.renderRecipeList.bind(this)
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this)
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this)
  }

  handleRecipeNameChange(event){
    this.setState({recipeName: event.target.value})
  }
  handleUserIngredientsChange(event){
    this.setState({userIngredients: event.target.value})
  }
  renderRecipeList(recipeItem, index){
    const recipe = recipeItem.recipe;
    const ingredients = recipeItem.ingredients;
    const recipeID = recipeItem.id;
    const id = shortid.generate();
    return(
      <div key={id}>
        <Panel
          collapsible
          onClick={ ()=> this.setState({ open: !this.state.open })}
          eventKey={index}
          header={<h3>{recipe}</h3>}>
          <ListGroup >
            <ListGroupItem  header="Ingredients"></ListGroupItem>
            {ingredients.map(function(ingredient,index){
              return <ListGroupItem key={index}>{ingredient}</ListGroupItem>;
            })}
            <ListGroupItem>
              <Button
                onClick={() => this.props.deleteRecipe(recipeItem)}
                bsStyle="danger">Delete
              </Button>
              <Edit
                recipeName={recipe}
                userIngredients={ingredients}
                recipeID={recipeID}
              />
            </ListGroupItem>
          </ListGroup>
        </Panel>
      </div>
    )
  }
  render(){
    const self = this;
    return(
      <div className="container">
        <div className='panel-group'>
          {this.props.recipeList.map(self.renderRecipeList)}
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    recipeList : state.recipeState
  };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({deleteRecipe : deleteRecipe, editRecipe : editRecipe}, dispatch)
}

export default connect(mapStateToProps,mapDispatchToProps)(RecipeBox);