Child state isn't updated with react-sliding-pane

Question

I have react page where there is dropdown of employee. Next to dropdown, there is button called "Show Filters". Click of this button opens up SlidingPane (https://www.npmjs.com/package/react-sliding-pane) which render a class component called "FilterItem". We need to pass some data from parent component to FilterItem as props. When user change item from dropdown and click "Show Filters" we expect new data to be passed on FilterItem. Unfortunately filterItem will always have previously selected item data and it don't get refreshed. Our component is very long so putting some code

      <Container fluid style={{marginTop: '10px'}}>
        <Row>
          <Col>
            <div className="input-group m-2">
              <div className="input-group-prepend">
                <span className="input-group-text">Campaigns</span>
              </div>
              {
                state.campaignTypes && (
                  <select
                    className="form-control"
                    name="campaigntype"
                    value={state.selectedCampaign}
                    onChange={handleCampaignTypeSelection}
                  >
                    {renderCampaignTypes()}
                  </select>

                )
              }
            </div>
          </Col>
          <Col>
            <Button variant="primary" className="m-2 pl-2"
                    disabled={!state.selectedCampaign}
                    onClick={() => setState({...state, isPaneOpen: true })}
            >
              Show Filters
            </Button> 
          </Col>
         </Row>
        </Container>

        <SlidingPane
          className="some-custom-class"
          overlayClassName="some-custom-overlay-class"
          isOpen={state.isPaneOpen}
          title="Hey, it is optional pane title.  I can be React component too."
          subtitle="Optional subtitle."
          onRequestClose={() => {
            setState({...state, isPaneOpen: false });
          }}
        >
          <FilterItem 
            sampleData={state.employeeData}
            countryList={state.countryList}
          />
        </SlidingPane>

So, on handleCampaignTypeSelection method, we update employeeData state value.

Issue

User selects 1st item from Dropdown, user detail set on employeeData state variable and FilterItem component display correct information. User selects another item from Dropdown, user detail set on employeeData state variable correctly but FilterItem state still have value from previous item. We were expecting that when Sliding Pane gets closed, it will unmount the component (Which it does as we see console log from componentWillUnMount() method, but its state don't get reset.

Please advise

Answer 1

We added useEffect dependency to parent component. So our parent component useEffect looks like

useEffect( ()=> { //our code }, [state.employeeData])

This solves our problem