React.Children.only expected to receive a single React element child. But only single children in files? - react-bootstrap

Question

All my other pages work fine. And this happened after I made an addition to App.js, which I subsequently removed. Obviously I must have made some other change, I'm not able to find it however.
Error: React.Children.only expected to receive a single React element child.
▶ 18 stack frames were collapsed.
(anonymous function)
src/components/Feed.js:16
13 | .then(res => res.json())
14 | .then((data) => {
15 |
> 16 | this.setState({ events: data })
| ^ 17 |
18 | })
19 | .catch(console.log)
Looking at Feed.js I've not modified anything here.
import React, {Component} from "react";
import Header from "./Header"
import Events from "./Events"
class Feed extends Component {
state = {
events: []
}
componentDidMount() {
fetch('http://127.0.0.1:5002/events')
.then(res => res.json())
.then((data) => {
this.setState({ events: data })
})
.catch(console.log)
}
render() {
return (
<div className="feed">
<Header />
<div class="container">
<Events events={this.state.events} />
</div>
</div>
);
}
}
export default Feed;
And the only other component it calls is as below:
import React from 'react';
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import Alert from 'react-bootstrap/Alert'
import Button from 'react-bootstrap/Button'
import './App.css'
function Events ({events}){
return (
<div>
<center><h1>Event List</h1></center>
{events.map((event) => (
<div class="mt-2">
<Accordion defaultActiveKey="0" className="rounded ">
<Card className="rounded">
<Accordion.Toggle as={Alert} variant="secondary" eventKey={event.id} className="accordion-title border-0"><span className="badge badge-secondary">{event.date}</span><span> </span><span>{event.title}</span>
</Accordion.Toggle>
<Accordion.Collapse eventKey={event.id} className="accordion-collapse">
<Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
<Card.Body className="rounded">{event.summary}</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
))}
</div>
)
}
export default Events;
As I said I've not modified anything in these two files and I've made sure to remove any changes to other files.

Answer 1

I did make a change which caused the issue.
In Events.js I added a new button to the accordion. On removing this everything worked fine.
The offending entry
<Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
The Button should have been inside the Card.Body.
<Accordion defaultActiveKey="0" className="rounded ">
<Card className="rounded">
<Accordion.Toggle as={Alert} variant="secondary" eventKey={event.id} className="accordion-title border-0"><span className="badge badge-secondary">{event.date}</span><span> </span><span>{event.title}</span>
</Accordion.Toggle>
<Accordion.Collapse eventKey={event.id} className="accordion-collapse">
<Card.Body className="rounded">{event.summary}
<Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>```