How to remove this this image Background in nextjs

This image is added but when it is rendered in Nextjs it automatically adds the extra content.

<div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3">
  <div className="mb-4">
    <Image
      src={ProfilePic}
      alt=""
      className="w-1/2 h-auto hover:drop-shadow-image"
    />
  </div>
  <div className="w-full flex flex-col items-start">
    <p className="text-lg font-semibold text-light mb-1">------</p>
    <p className="text-base font-medium text-light mb-1">-------</p>
    <p className="text-sm font-medium text-light">example@gmail.com</p>
  </div>
</div>

This is the code inside the div, I need only the image not the extra square content.

Next/Image

> This next/image component uses browser native lazy loading

It's good practice for SEO and built to prevent CLS (Cumulative Layout Shift) so its needs to be provided explicit width and height properties for layout management. Example:

<Image
    src={ProfilePic}
    alt=""
    width={500}
    height={500}
    className="w-1/2 h-auto hover:drop-shadow-image"
/>

Alternatively, another approach for this case is to lift these size properties to their container. Example

<div class="container relative h-10 w-10">
    <Image
        src={ProfilePic}
        alt=""
        fill
        size"30vw" 
        className="object-contain hover:drop-shadow-image"
    />
</div>

For more on this approach fill and sizes.

In your case, the layout can render out may be based on other higher containers of the html component you provided, which have explicit size properties. So you might change to those approaches above for clean layout management.