Рендеринг дочернего компонента React memo

У меня проблемы с отображением компонентов комментариев.

Итак, у меня есть компонент listComment, и у него есть 2 дочерних компонента CommentItem и CommentGroup.

Мой компонент CommentGroup похож на раскрывающийся список, где вы можете открывать и закрывать его.

Я пытался использовать React.memo(), но он все еще отображает детей, которые уже отображаются

Моя проблема в том, что каждый раз, когда я добавляю новый комментарий, он снова отображает уже обработанные дочерние компоненты. Итак, комментарии, которые уже открыты, CommentGroup закрываются. И я использую redux для управления состоянием.

PS извините за плохой английский.

Данные комментариев

[{
body: "comment 1",
comment_counter: 0,
createdAt: "2020-06-14T13:42:38.465Z",
heart_counter: 0,
ownerId: "5edce08cabc7ab1860c7bdf4",
postId: "5ee3770495bfce029842bc68",
_id: "5ee6294eb7295a1c04b62374"
}, {
body: "comment 2",
comment_counter: 0,
createdAt: "2020-06-14T13:42:38.465Z",
heart_counter: 0,
ownerId: "5edce08cabc7ab1860c7bdf4",
postId: "5ee3770495bfce029842bc68",
_id: "5ee6294eb7295a1c04b62374"
}]

ListComments.js

const comments = useSelector(state => state.comment.comments)

return comments.map(comment => {
        return (
            <div key={comment._id}>
                <CommentItem comment={comment} type="post_comment" />
                <div className={classes.mLeft}>
                    <CommentGroup counter={comment.comment_counter} />
                </div>
            </div >
        )
    })

CommentGroup.js

const CommentGroup = React.memo((props) => {
const [open, setOpen] = useState(false)

const onOpen = () => {
    setOpen(true)
}

const onClose = () => {
    setOpen(false)
}

return (
    <div>
        <Button
            size="small"
            color="primary"
            startIcon={
                !open ? <ArrowDropDownOutlinedIcon /> : <ArrowDropUpOutlinedIcon />
            }
            onClick={
                !open ? () => onOpen() : () => onClose()
            }
        >
            {!open ? 'View' : 'Hide'} {1} Replies
        </Button>
        CommentGroupOpen: {open ? 'true' : 'false'}
    </div>
)
}, (prevProps, nextProps) => {
 console.log(prevProps) // not getting called
 if (prevProps.counter !== nextProps.counter) {
    return false
 }
 return true
})

export default CommentGroup

CommentItem — это всего лишь компонент отображения.