Changing a value in an object loaded by SWR

Question

I have an object fetched using SWR called supplier.

Now once I have the data I put that data in a form. Some of the inputs are some are . Now, with the I have a problem, because I want to be able to set the value of the select when supplier is loaded, but I want the user to be able to update the value and submit the form, and send the data back to the API.

Currently my looks like this:

export default function AssetPriceCategorySelect(props)
{
    const { supplierPriceCategory, assetPriceCategories } = props

    return (
        <select name="priceCategoryID" className="rounded-md py-2 px-2 border border-r w-fit" value={supplierPriceCategory}>
            <option value="none">--None--</option>
            { assetPriceCategories.length > 0 ? (
                <>
                    { assetPriceCategories && assetPriceCategories.map((assetPriceCategory,index) => {
                        return (<option key={assetPriceCategory.node.id} value={assetPriceCategory.node.id}>{assetPriceCategory.node.name}</option>)
                    })}
                </>
            ) : false}
        </select>
    )
}

However with the value set, I can't change the select drop down. It drops down, and I click to change the value but it doesnt change and stays the same value. I also get an error saying that I'm missing an onChange function.

I want to load the data from the API, the user can update the data in a form, and then update the API when I load the data back in to the API.

I dont have this issue with the input text fields, I can change them no problem.

Also:

• if I use defaultValue='', I change the drop down but the initial option doesnt get set to 'selected'
• If I set an onChange function, and update the object, I am going against the SWR methodology surely?

I'm really stuck with the logic here, and Im not sure what to do.