why does my list loop into different widows in React

Im creating a data management storage web app (basically a todo app ) and the issue im having is that when i enter my data it prints in separate windows i think it's looping somewhere but i am not sure. and i don't seem to have any errors

here is my CpdList.js

import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import uuid from 'uuid';

export default class CpdList extends Component{
    state = {
        items: [
            {id: uuid(), date: ''},
            {id: uuid(), activity: ''},
            {id: uuid(), hours: ''},
            {id: uuid(), learningStatement: ''},
            {id: uuid(), evidence: ''}
        ]
    }
    render() {
        const { items } = this.state;
        return (
            <Container>
                <Button
                    color='dark'
                    style={{marginBottom: '2rem'}}
                    onClick={() => {
                        const date = prompt('Enter Date')
                        if(date) {
                            this.setState(state => ({
                                items: [...state.items, { id: uuid(), date }]
                            }));
                        }
                        const activity = prompt('Enter Activity')
                        if(activity) {
                            this.setState(state => ({
                                items: [...state.items, { id: uuid(), activity }]
                            }));
                        }
                        const hours = prompt('Enter Hours')
                        if(hours) {
                            this.setState(state => ({
                                items: [...state.items, { id: uuid(), hours }]
                            }));
                        }
                        const learningStatement = prompt('Enter Learning Statement')
                        if(learningStatement) {
                            this.setState(state => ({
                                items: [...state.items, { id: uuid(), learningStatement }]
                            }));
                        }
                        const evidence = prompt('Evidence YES or NO!')
                        if(evidence) {
                            this.setState(state => ({
                                items: [...state.items, { id: uuid(), evidence }]
                            }));
                        }
                    }}
                >Add Data</Button>
                <ListGroup>
                    <TransitionGroup className='cpdList'>
                        {items.map(({ id, date, activity, hours, learningStatement, evidence }) => (
                            <CSSTransition key={id} timeout={500} classNames='fade'>
                                <ListGroupItem>
                                    <Button
                                    className='remove-btn'
                                    color='danger'
                                    onClick={() => {
                                        this.setState(state => ({
                                            items: state.items.filter(item => item.id !== id)
                                        }));
                                    }}
                                    >&times;</Button>
                                    <ul className="list-group">
                                        <li className="list-group-item">Date: {date}</li>
                                        <li className="list-group-item">Activity: {activity}</li>
                                        <li className="list-group-item">Hours: {hours}</li>
                                        <li className="list-group-item">learning Statement: {learningStatement}</li>
                                        <li className="list-group-item">Evidence: {evidence}</li>
                                    </ul>
                                </ListGroupItem>
                            </CSSTransition>
                        ))}
                    </TransitionGroup>
                </ListGroup>
            </Container>
        )
    }
};

it also reprints 5 windows when the browser is refreshed and the data goes away.