Следующее изображение JS, я не могу сделать положение изображения по центру с помощью попутного ветра

Привет, я работаю над проектом с использованием следующего js и попутного ветра. Я хочу центрировать это изображение, но следующий js, похоже, игнорирует flex и justify-center, как показано на изображении.

Я хочу динамически передавать позиции (например, justify-start, justify-end). Любая помощь приветствуется.

import NextImage from '@components/image-copy'

function test() {

  return (
    <div className = "w-full bg-red-400">
      <NextImage
        src = "/images/billboard-corner.webp"
        url = {'www.facebook.com'}
        layoutFill = {true}
        wrapper = "h-60  w-1/2 bg-red-100 relative flex justify-center"
      />
    </div>
  )
}

export default test

А вот и моя имиджевая составляющая.

import Link from 'next/link'
import Image from 'next/image'

const NextImage = ({
  src,
  alt,
  className,
  linkType = 'undef',
  target,
  url,
  draggable,
  width,
  height,
  wrapper,
  position,
  layoutFill,
}) => {

  const style = `${wrapper} relative `

return (
    <>
      {layoutFill ? (
        linkType === 'link' ? (
          <div className = {style}>
            <Link href = {url}>
              <a>
                <Image src = {src} alt = {alt} layout = "fill" draggable = {draggable} className = {className} />
              </a>
            </Link>
          </div>
        ) : (
          linkType === 'undef' && (
            <>
              <div className = {style}>
                <Image src = {src} alt = {alt} layout = "fill" draggable = {draggable} className = {className} />
              </div>
            </>
          )
        )
      ) : <div>Example</div>
    }
    </>
  )
}

экспорт по умолчанию NextImage