Need help with a @rbxts/react item component for a Tarkov-themed inventory.

import React, { useRef, useState } from "@rbxts/react";

export enum DisplayType { // The display type for the current item. Can either be a image (imagelabel) or a model (viewportframe) 
    Model = "model",
    Image = "image"
}

// PROP TYPES
interface InventoryItemProps {
    displayType: DisplayType; // the DisplayType (DisplayType.Model | DisplayType.Image)
    sizeX: number; // slot size in x direction
    sizeY: number; // slot size in y direction
    initialPosition: UDim2; // the inital position of the item when the invnetory grid renders/mounts
    image?: string; // the image id of the item assuming the displayType is set to image
    model?: Instance; // the model instance of the item assuming the displayType is set to model
}

const slotSize: number = 60; // TODO: make global constant

// COMPONENT
export default function InventoryItem({ displayType, sizeX, sizeY, initialPosition, image, model }: InventoryItemProps) {
    // STATE
    const [position, setPosiiton] = useState<UDim2>(initialPosition)

    // HELPER FUNCTIONS
    const clampSize = (x: number, y: number): UDim2 => { // ensures the size of the frame can only be a factor of gridSize. In this case, a multple of 60
        return UDim2.fromOffset(
            math.round(math.max(1, x)) * slotSize, 
            math.round(math.max(1, y)) * slotSize
        )
    }

    const inventoryItemProps = {
        Size: clampSize(sizeX, sizeY),
        Position: position,
    }

    const dragDetectorProps: React.InstanceProps<UIDragDetector> = {
        DragStyle: "TranslatePlane",
        Event: {
            DragStart: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragContinue: (rbx: UIDragDetector, inputPosition: Vector2) => {

            },
            DragEnd: (rbx: UIDragDetector, inputPosition: Vector2) => {
                
            },
        }
    }

    // RENDER
    return displayType === DisplayType.Image ?
        <imagelabel
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </imagelabel> :
        <viewportframe
            {...inventoryItemProps}
        >
            <uidragdetector {...dragDetectorProps} />
        </viewportframe>
}