Вопрос по react-transition-group
 

Создаю через .map ряд объектов, к ним добавляю значение из state, которое когда становится true, то анимация для каждого объекта срабатывает.
У этих объектов есть кнопки фильтры, они лежат в компоненте <FilterButtons />.
По нажатию на каждую из них фильтруется массив через .filter
и когда массив отфильтровался, объекты отрисовываются уже без анимации, потому что значение из state стало true при загрузке компонента и анимации сработали только для всего массива, но как сделать что бы анимация работала когда срабатывает фильтр? подскажите если кто знает, сломал голову уже. Вот код компонента и действий из Redux

Сам компонент:

class Projects extends Component {

  componentDidMount() {
    this.props.pageLoaded(); //делаю  projectsPageLoaded: true  в redux state через action (pageLoaded), поэтому вначале весь массив отображается с анимацией, но потом при применении фильтра к массиву анимации не срабатывают,потому что projectsPageLoaded остается true

  }

  render() {
    const { projects, projectsPageLoaded } = this.props;
  	return (
          <div>
            <FilterButtons />
              {
                projects.map((project, idx) => {
                  return (
                    <CSSTransition
                      in={projectsPageLoaded}
                      timeout={300}
                      classNames="project-card">
                      <div>
                        {project.title}
                      </div>
                    </CSSTransition>
                  )
                })
              }
          </div>  
  	)

  }
};
//state
const mapStateToProps = ({ projects, projectsPageLoaded}) => {
  return { projects, projectsPageLoaded }
};
//action
const mapDispatchToProps = (dispatch) => {
  return {
    pageLoaded: () => dispatch({
      type: 'PROJECT_PAGE_LOADED'    
    })

  }
};

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

Действия Redux для фильтрации массива

const filter = (state, filter) => {
  switch(filter) {
    case'all':
      return {
        ...initialState      
      }  
    case'react':
      const react = initialState.projects.filter((item) => item.done);
      return {
        ...state,
        activeFilter: filter,
        projects: react,
      }        
    case'fullstack':
      const fullstack = initialState.projects.filter((item) => !item.done);
      return {
        ...state,
        activeFilter: filter,
        projects: fullstack
      }

  }
};

Reducer

const reducer = (state = initialState, action) => {
  console.log(action.type);
  //actions
  switch (action.type) {

    case 'PROJECT_PAGE_LOADED':
      return {
        ...state,
        projectsPageLoaded: true

      }; 
    case 'ON_FILTER_CHANGE':
      return filter(state, action.payload)

    default:
      return state;
  }
};