I'm trying to import Material UI onto my project with react. but i'm getting this error.

 Warning: Failed prop type:
 ForwardRef(Button): prop type `component` is invalid; it must be a
 function, usually from the `prop-types` package, but received
 `undefined`. This often happens because of typos such as
 `PropTypes.function` instead of `PropTypes.func`.

I'm following the usage guide from Material UI's site

material_test.js

import React, { Component } from 'react';
import Button from '@mui/material/Button';

export default class MaterialTest extends Component {

    render() {
        return (
            <Button>Hello World</Button>
        );
    }
}

but with a div works fine:

import React, { Component } from 'react';
import Button from '@mui/material/Button';

export default class MaterialTest extends Component {

    render() {
        return (
            <div>Hello World</div>
        );
    }
}

I have this on my package.json

"dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.2.7",
    (...)
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    (...)
}

I'm routing this from another view to {localhost}:3000/material_test