PNG sprite sheet - Full Screen size with React

Question

I'm trying to set up a PNG sprite sheet full screen in my React project. At the moment, as you can see from the code, I have a heart icon that will animate itself after clicked on it. I'm trying to have this full screen, but I don't know how to change the size since that if I increase the width and height in the last Box from 100px to 100vw, this would show me all the frames and so the animation gets broken.

import { Box } from "@mui/material";
import spr from "../../../assets/spr.png";

const VideoEffect = () => {
  const [active, setActive] = useState(false);
  return (
    <Box
      sx={{
        width: "100vw",
        height: "100vh",
        backgroundColor: "black",
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          border: "1px solid red",
          width: "100vw", // Make the box take the full width of the viewport
          height: "100vh", // Make the box take the full height of the viewport
        }}
      >
        <Box
          onClick={() => setActive(!active)}
          sx={{
            width: "100px", // Make the heart image take the full width of the box
            height: "100px", // Make the heart image take the full height of the box
            backgroundImage: `url(https://cssanimation.rocks/images/posts/steps/heart.png)`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover", // Make the heart image cover the entire box
            backgroundPosition: active ? "-2800px 0" : "0 0",
            transition: "background-position 1s steps(28)",
            transitionDuration: "1s",
          }}
        ></Box>
      </Box>
    </Box>
  );
};

export default VideoEffect;

Do you know how to properly fix the sizes of PNG Spritesheets? Thank you so much