How to move Icons in Material UI

How can I move my components on the image by using material UI ? I want to move my heart component to the top right corner of my image and ratings on the bottom of my image.

import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
    display: "flex",
  },
  text: {
    textAlign: "center",
    color: "#333333",
  },
  textCardBottom: {
    display: "flex",
    justifyContent: "center",
  },

  textPrice: { color: "#333333" },

  textStrike: { margin: "0px 10px 0px 10px" },

  textDiscount: { color: "#ff6a6a" },
  stars: {
    right: 9,
  },
  ratings: {},
});

const Cards = () => {
  const [showComponent, setShowComponent] = useState(false);
  const classes = useStyles();

  const handleToggleHoverIn = (event) => {
    event.preventDefault();
    setShowComponent(true);
  };

  const handleToggleHoverOut = (event) => {
    event.preventDefault();
    setShowComponent(false);
  };

  console.log("The state showComponent value is ", showComponent);

  return (
    <Card
      onMouseEnter={handleToggleHoverIn}
      onMouseLeave={handleToggleHoverOut}
      className={classes.root}
    >
      <CardActionArea>
        <CardMedia
          component="img"
          alt=""
          image={image}
          title="Contemplative Reptile"
        />
      
        {/* {showComponent ? ( */}

        <Grid container>
          <Stars right="40%" /> // want this rating component on the centre of my image
          <FavoriteBorderIcon fontSize="large" /> // want this heart to the top right corner
        </Grid>
        {/* ) : null} */}
        <CardContent>
          <Typography
            gutterBottom
            variant="h5"
            component="h2"
            className={classes.text}
          >
            Printed round Neck
          </Typography>
          <Typography
            variant="body2"
            color="textSecondary"
            component="div"
            className={classes.textCardBottom}
          >
            <Typography
              variant="body2"
              color="textSecondary"
              component="b"
              className={classes.textPrice}
            >
              Rs. 454
            </Typography>

            <Typography
              variant="body2"
              color="textSecondary"
              component="strike"
              className={classes.textStrike}
            >
              Rs. 699
            </Typography>

            <Typography
              variant="body2"
              color="textSecondary"
              component="span"
              className={classes.textDiscount}
            >
              (35 % off)
            </Typography>
            {/* <p>
              <b>Rs. 454</b>
              <strike>Rs. 699</strike>
              <span style={{ color: "#FF7F7F" }}> (35 % off) </span>
            </p> */}
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>

  );
};

export default Cards;

I tried to use the position property of material UI but I wasn't able to move the components. I tried the Material UI docs but couldn't find properties that could help me moving the components.