Парни подскажите где я ошибаюсь, использую CSSTransition в компоненте, но

Question

Парни подскажите где я ошибаюсь, использую CSSTransition в компоненте, но

с ним не монтируется компонент, а без него все работает! Как тут поправить?
function ListTask({state, dispatch, editFn, theme}) {

const [taskDelete, setTaskDelete] = useState(false);
const ref = useRef();

const deleteTask = (id) => {
setTaskDelete(true);
const newListTask = [...state].filter( item => item.id != id)
dispatch({type:'delete', payload:newListTask});
}

const complete = (id) => {
[...state].map( item => {
if(item.id == id) {
item.status = !item.status;
}
dispatch({type:'complete'});
})
}
return(
<>
{state.map( (item, index) =>
(<CSSTransition
in={taskDelete}
timeout={300}
classNames="task"
mountOnEnter
unmountOnExit
nodeRef={ref}
>
<Container key={item.id} ref={ref} className={`${s.container} ${theme}`}>
<Row className={s.row}>
<Col xs={10} className={s.col}>
<strong style={{marginLeft:'0.2em', marginRight:'.4em', textDecoration:'none'}}>{index+1}.</strong>
{item.status ?
<span className={s.complete_task}>{item.text}</span> :
item.text}
</Col>

<Col className={s.col_btn}>
<Button className={s.btn} onClick={() => editFn(item)}>
<FontAwesomeIcon icon={faPenNib} />
</Button>
</Col>

<Col className={s.col_btn}>
<Button className={s.btn}onClick={() => deleteTask(item.id)}>
<FontAwesomeIcon icon={faTrash} />
</Button>
</Col>

<Col className={s.col_btn}>
{item.status ?
(<Button className={s.btn} variant="success" onClick={() => complete(item.id)}>
<FontAwesomeIcon icon={faLock} />
</Button>)
:
(<Button className={s.btn} variant="danger" onClick={() => complete(item.id)}>
<FontAwesomeIcon icon={faUnlockKeyhole} />
</Button>)}
</Col>
</Row>
</Container>
</CSSTransition>)

)}
</>

)
}