why do my MUI button components look like this instead of like the docs no external .css file or theme changes besides the ones listed I have the roboto font installed as well and working on the typography I want whatever changes I make to be global

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import "./index.css";
import Home from "./views/Home";
import Login from "./views/Login";
import Register from "./views/Register";

const theme = createTheme({
  components: {
    Button: {
      defaultProps: {
        fontSize: 1000,
      },
    },
  },
});
const App = () => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <BrowserRouter>
          <Routes>
            <Route path="/" exact element={<Home />} />
          </Routes>
        </BrowserRouter>
      </ThemeProvider>
    </>
  );
};
export default App;

<Button variant="contained" style={{ width: 150, height: 50 }}>
          I'm a Doctor
</Button>

thanks for any help