How to use Next.js Image component with MaterialUI?

I am able to use the <img> tag no problem, but when I try to use the <Image> component, all that displays is an empty square the size of the image. The only way I have been able to get the image to display without using <img> is with the <Avatar> component. It's just a small brand image so it's not a huge deal, but I would like to use the built-in Next.js image optimization. And using <Avatar> does not feel very semantic as well.

It is being displayed inside of a ListItem component like this:

<Drawer variant="permanent" {...other}>
            <List disablePadding>
                <ListItem
                    sx={{
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <Avatar
                        src="images/icons/agreement2.png"
                        alt="Scales of Justice Brand Image"
                        sx={{ width: 50, height: 50 }}
                    />
                </ListItem>

This is what I have tried so far:

1. I created a separate component for the image

import Image from 'next/image'
import brandImage from '../public/images/icons/law.png'

export default function Brand() {
    return <Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
}

and displaying <Brand /> inside of the <ListItem> in place of the current <Avatar> component.

2. I tried to import the .png file and use

<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />

inside of the <ListItem>. And then I tried without importing the image and just using the full file path.

3. I tried placing <Image> inside of the <Avatar> component.

<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>

I also tried adding in the layout prop with all of the options.

I am using Next.js v12.0.9 and MUI v5.4.2