Framer PropertyControl Update Problem

FontAwesomeFont.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { url } from "framer/resource"

async function importScripts() {
    let script = document.createElement("script")
    script.id = "font-awesome-fonts-script"
    // script.src = "https://kit.fontawesome.com/1fa5cfd703.js". // old kit - webfonts, not svg
    script.src = "https://kit.fontawesome.com/ee1b620a34.js" // unified kit - svg
    script.crossOrigin = "anonymous"
    // @ts-ignore
    document.body.appendChild(script)
}

if (!document.getElementById("font-awesome-fonts-script")) {
    importScripts()
    console.log("Font Awesome loaded")
} else {
    console.log("Font Awesome already loaded")
}

function IconFragement({ icon, variant, color, fontSize }) {
    const [iconClasses, setIconClasses] = React.useState(
        `${variant} fa-${icon} faIcon`
    )

    React.useEffect(() => {
        console.log("useEffect Updating: setIconClasses")
        setIconClasses(`${variant} fa-${icon} faIcon`)
    }, [icon, variant, color, fontSize])
    return (
        <i
            style={{
                // marginTop: "0.125em", // fudge factor because FA
                verticalAlign: "-.125em",
                color: color,
                fontSize: fontSize,
                flex: "0 0 auto",
                flexGrow: 0,
                flexShrink: 0,
            }}
            className={iconClasses}
            // {...rest}
        ></i>
    )
}

export function FontAwesomeFont(props) {
    const {
        onTap,
        height,
        width,
        // fontSize,
        // color,
        // variant,
        // icon,
        ...rest
    } = props

    const [variant, setVariant] = React.useState(props.variant)
    const [icon, setIcon] = React.useState(props.icon)
    const [fontSize, setFontSize] = React.useState(props.fontSize)
    const [color, setColor] = React.useState(props.color)

    React.useEffect(() => {
        if (fontSize !== props.fontSize) {
            setFontSize(props.fontSize)
        }
    }, [props.fontSize])

    return (
        <div
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                // border: "1px solid red",
                height: height,
                width: width,
            }}
        >
            <IconFragement
                icon={icon}
                variant={variant}
                color={color}
                fontSize={fontSize}
            />
        </div>
    )
}

FontAwesomeFont.defaultProps = {
    height: 24,
    width: 24,
    fontSize: 24,
    color: "#51585a",
    variant: "fal",
    icon: "times-circle",
}

addPropertyControls(FontAwesomeFont, {
    onTap: {
        type: ControlType.EventHandler,
    },
    fontSize: {
        type: ControlType.Number,
        title: "Size",
    },
    color: {
        type: ControlType.Color,
        title: "Color",
    },
    variant: {
        type: ControlType.Enum,
        title: "Variant",
        options: ["fal", "fas", "fad", "far", "fak"],
        optionTitles: ["Light", "Solid", "Duotone", "Regular", "Custom"],
    },
    icon: {
        type: ControlType.String,
        title: "Icon",
    },
})