I am trying to resize an image in React, but for some reason changing the height and width of the tag via useStyles does not make the image smaller, but simply shifts it around in the page.

Code:

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>
  );
}

I'm not quite sure what is the issue, all I really want to do is to make the image smaller proportionally and put it at the center of the page.