I thought Material-UI grid items were just used for quick spacing fixes. My grid items are now showing up as cards? Would just like it to be invisible how it was, however the docs don't explain how to do this. Appreciate any help!

import React, { useState, useEffect } from "react";
import Grid from "@mui/material/Card";
import { Container, TextField, FormControl } from "@mui/material";

export default function MainPage() {
  return (
    <Container maxWidth="lg" style={{ height: "100vh" }}>
  <Grid container>
    <Grid item xs={12}>
      <img
        style={{ width: "800px" }}
        src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
        alt="half-title-1"
      />
    </Grid>

    <Grid item xs={12}>
      <img
        style={{ width: "800px" }}
        src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
        alt="half-title-2"
      />
    </Grid>
  </Grid>
    </Container>
  );
}