When I add React-bootstrap the app crashes - reactjs

Question

I tried using both bootstrap and react-bootstrap but to no avail. I tried something simple like a button but every time I get a whitescreen and the following error:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
What could be the issue?
CODE:
import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
export class Home extends Component {
static displayName = Home.name;
state = {
data: []
};
componentDidMount() {
fetch('/api/weeks')
.then(res => res.json())
.then(data => this.setState({ data }))
.catch(error => console.error(error));
}
render () {
const { data } = this.state;
return (
<div>
<h1>Hello, world!</h1>
<Button>Test</Button>
<button>Test</button>
<h2>Weeks Data</h2>
<ul>
{data.map(week => (
<li key={week.id}>{week.name}</li>
))}
</ul>
</div>
);
}
}
EDIT:
I get the following errors, I don't know what i'm supposed to look at:
Uncaught TypeError: Cannot set properties of undefined (setting '_element') at Button (fails.js:7:1)
VM231 react_devtools_backend.js:4012 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The above error occurred in the component