Material UI sizing an object-fit issues with NEXTjs <Image/>

Question

I've been playing around with MUIv5 and have been trying to create a simple navbar with a logo on the left. Despite setting the image layout: intrinsic I am still noticing the image won't stay contained within the bar unless I manually set the width and height to work within the bar.

I thought the intrinsic value is suppose to override the height and width to have it conform to the div its in?

If anyone has any suggestions on how to get this to stay within the bar it would be greatly appreciated.I've gone ahead and attached the code below and a screenshot.

Navbar.tsx

import {
  AppBar,
  Container,
  IconButton,
  Toolbar,
  Typography,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { Box } from "@mui/system";
import React from "react";
import { logoData } from "../../data/navbarData";
import Image from "next/image";

const Navbar = () => {
  return (
    <AppBar position="static">
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
          >
            <Box component="div">
              <Box
                component="image"
                sx={{ my: "auto" }}
                justifyContent="center"
              >
                {logoData.map((logoData, i) => (
                  <Image
                    src={logoData.src}
                    alt={logoData.alt}
                    width={logoData.width}
                    height={logoData.height}
                    // layout="intrinsic"
                    key={i}
                  />
                ))}
              </Box>
            </Box>
          </Typography>
          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              color="inherit"
              //   onClick={handleOpenNavMenu}
            >
              <MenuIcon />
            </IconButton>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Navbar;

navbarData.ts

export const logoData = [
  {
    src: "/assets/images/phreaquencylogo.svg",
    alt: "Company Logo",
    width: 300,
    height: 100,
    layout: "intrinsic",
    obejecFit: "contain",
  },
];