Estoy tratando de cambiar el tamaño de una imagen en React, pero por alguna razón, cambiar la altura y el ancho de la etiqueta a través de useStyles no hace que la imagen sea más pequeña, sino que simplemente la cambia de lugar en la página.

Código:

 import { makeStyles } from "@material-ui/core/styles"; import { SvgIcon, Typography } from "@mui/material"; import { Icon } from "@mui/material"; const useStyles = makeStyles((theme) => ({ pageContainer: { display: "block", marginTop: 120, justifyContent: "center", alignItems: "center", }, logo: { display: "flex", justifyContent: "center", alignItems: "center", width: "50%", height: "50%", }, info: { display: "block", justifyContent: "center", alignItems: "center", }, iconContainer: { display: "flex", height: "20vh", width: "auto", }, })); const teamNames = [ "Name1", "Name2", "Name3", "Name4", ]; export default function () { const classes = useStyles(); return ( <div className={classes.pageContainer}> <div className={classes.logo}> <img src={process.env.PUBLIC_URL + "/myLogo.png"}></img> </div> <div className={classes.info}> <Typography variant="h3" display="block" align="center"> About the Team </Typography> {teamNames.map((personName) => ( <Typography variant="h5" display="block" align="center"> {personName} </Typography> ))} </div> </div> ); }

No estoy muy seguro de cuál es el problema, todo lo que realmente quiero hacer es reducir la imagen proporcionalmente y colocarla en el centro de la página.