Why Button text not get resized in Material UI? - reactjs

Question

I have a Search button, and some other button, but only Search button text font size not get reduced, do you have any idea why?
import React from "react";
import event1 from "../assets/images/event1.png";
import event2 from "../assets/images/event2.png";
import event3 from "../assets/images/event3.png";
import event4 from "../assets/images/event4.png";
import scene from "../assets/images/scene.png";
import styles from "../assets/styles/HomePage.module.css";
import { Container, Box, TextField, Button } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyle = makeStyles({
root: {
backgroundColor: "#f6d7dc",
fontFamily: "ASMBold",
height: "100%"
},
container: {
width: "80%",
paddingTop: "20px"
},
search: {
border: "5px solid #184cdf",
padding: "22px 0",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "20px",
margin: 0
},
longInput: {
width: "400px"
},
searchButton: {
backgroundColor: "#184cdf",
color: "#ec8562",
textTransform: "uppercase",
fontWeight: "bold",
height: "55px",
width: "100px"
}
});
function HomePage(props) {
const classes = useStyle();
return (
<div className={classes.root}>
<Container maxWidth="xl" className={classes.container} disableGutters>
<Box className={classes.search}>
<TextField variant="outlined" placeholder="city or place" />
<TextField variant="outlined" placeholder="dates" />
<TextField
variant="outlined"
placeholder="artists / venues / events"
className={classes.longInput}
/>
<Button varian="contained" className={classes.searchButton}>
Search
</Button>
</Box>
</Container>
</div>
);
}
export default HomePage;