Why doesn't the size of the component inside of a Next.js fill the div?

Question

I'm using model-viewer inside of a Next.js app. Here is what my react component looks like.

The component defaults to 300px and will not fill the div. I have a feeling this has something to do with the render lifecycle of React?

import {useRef, useEffect} from 'react'
import styles from '@/styles/Webxr.module.css'

export function WebXRView(props: any) {
    const viewerRef = useRef()

    return (
        <div className="w-1/2 h-64 bg-gray-200 text-center">
            <model-viewer
                id="myModelView"
                ref={viewerRef}
                alt="A 3D model of a chair"
                ar ar-modes="webxr scene-viewer quick-look"
                ar-scale="auto"
                ar-placement="floor"
                src={props.objPath}
                ios-src={props.objPath}
                camera-controls autoplay
                alt="A 3D model of a {{model_name}}"
                shadow-intensity="1.34" environment-image="legacy">

            </model-viewer>
        </div>


    )
}

The parent component code looks like this

<div className={webxrStyles.mainWebxr} >

                <WebXRView
                    objPath="URL to Object" />
            </div>

Here is the mainWebxr style

.mainWebxr {
    @apply flex items-center justify-center;
    background-color: blue;
    min-width:800px;
    min-height:600px;
}