How do I pass different props with each click between siblings in React? (aka Lifting State Up)

Can someone help me figure out how to update content in the sibling drawer whenever the user clicks a different portfolio item? I understand that I need to lift the state up to the parent and then pass it down to the drawer, but I can't seem to figure it out. The prop I have been using as a test is the drawer title (drawerTitle).

Here is my codepen:

https://codepen.io/moorehannah/pen/zYROvyj?editors=0111

Here is my main component code:

class Home extends React.Component {
constructor(props) {
    super(props);
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.state = {showDrawer: false, drawerTitle: 'initial title'};
}

toggleDrawer = (showDrawer, drawerTitle) => {
  this.setState(prevState => ({
    showDrawer: !prevState.showDrawer
  }))

  this.setState({
    drawerTitle: this.state.drawerTitle
  })
}

closeDrawer = () => {
    this.setState({showDrawer: false })
}

render() {
    const drawerTitle = this.state.drawerTitle;
    const showDrawer = this.state.showDrawer;

    return (
        <>
        <main>
          <CSSTransition
            in={showDrawer}
            timeout={{
              enter: 0,
              exit: 1000
            }}
            unmountOnExit
          >
         <Drawer 
           showDrawer={showDrawer} 
           drawerTitle={drawerTitle}
           onClose={this.toggleDrawer} 
          />
          </CSSTransition>
          <div className="grid">
            <PortfolioItem
                drawerTitle='test'
                onShowDrawerChange={this.toggleDrawer} />
            <PortfolioItem 
                drawerTitle='test 2'
                onShowDrawerChange={this.toggleDrawer} />
          </div>
        </main>  
        </>
    );
}

}