Why do I keep getting CSSTransaction is not defined?

import React, {Component} from 'react';
import {Container, ListGroup, ListGroupItem, Button} from 'reactstrap';
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';
import { v4 as uuidv4 } from 'uuid';

class ShoppingList extends Component {
	state = {
		items: [
		{id: uuidv4(), name: 'walk'},
		{id: uuidv4(), name: 'run'},
		{id: uuidv4(), name: 'read'},
		{id: uuidv4(), name: 'shop'},
		]
	}

	render(){
		const {items} = this.state;
		return(
			<Container>
				<Button
				color="dark"
				style={{marginButtom: '2rem'}}
				onClick={()=>{
					const name = prompt('Type in task');
					this.setState(state =>({
						items: [...state.items, { id: uuidv4(), name: name }]
					}));
				}}
				>Add Task</Button>
				<TransitionGroup>
					{items.map((id, name)=>(
						<CSSTransiton key={id} timeout={500} classNames='fade'>
							<ListGroupItem>{items}</ListGroupItem>
						</CSSTransiton>
					))}
				</TransitionGroup>
			</Container>
		);
	}
}


export default ShoppingList;

I can see CSSTransaction in the post title,<CSSTransiton> within <TransitionGroup> and <CSSTransition> in imports in your code. Which one is correct?

Considering that CSSTransaction is not a thing, I think you can go ahead and give your 2 cents on why this code is not working.

OP, you could get quicker answer if you would prepare a codepen or some other sandbox where others could test your code live.
Is this code from some FCC challenge?
Or is it your own snippet? If so, then maybe you just forgot to install react-transition-group?