about Integrating MUI defaultValues

[langziyang]

hi,i have simple CRUD use mui with reack hook form. the add and edit is same component.
when i edit,the defaultValues use axios fetch from api, this is my code

const {
        register,
        handleSubmit,
        setValue,
        formState: {errors}
    } = useForm({
        defaultValues: async () => {
            let product = await getApi(`/api/products/${id}`, {
                showSuccess: false,
                showLoading: false
            })
            return {...product, price: 102}
        }
    })

all textield like this

<TextField label='名称' fullWidth
                               {...register('name', {required: '不能为空'})}
                               error={!!errors.name}
                               helperText={errors.name?.message}
                    />
......

when i run i get this:

i already search whit google,i did not find solution

[ryanm352]

In my TextField, I use:

InputLabelProps={{
     shrink: defaultValue || value
}}

I wasted HOURS trying to figure this out.

[langziyang]

follow you answer, i use

<Controller
                                control={control}
                                render={({
                                             field: {onChange, value},
                                             fieldState: {error},
                                             formState
                                         }) => <TextField
                                    onChange={onChange}
                                    value={value || ''}
                                    label='网站名称'
                                    error={!!error}
                                    helperText={error?.message}
                                />}
                                name='SYSTEM_WEBSITE_NAME'
                                rules={{required: '不能为空'}}
                            />