'Reset values in react hook forms with fields loaded in map

So i have a form that has dropdowns for companies and as many companies they are i want the values to be loaded in there. I know how to do it if its not in a map.

customerCompanyList.map(cList => {
                    return (
                        <Controller
                            name={`customerCompany-${cList.id}`}
                            control={control}
                            render={({ field }) => (
                                <FormControl
                                    variant="outlined"
                                    className="mt-16"
                                >
                                    <InputLabel id="customerCompany-type-label">
                                        Customer Company
                                    </InputLabel>
                                    <Select
                                        labelId="customerCompany-type-label"
                                        id="customerCompany"
                                        label="Customer Company"
                                        {...field}
                                        fullWidth
                                    >
                                        <MenuItem value="">
                                            <em>None</em>
                                        </MenuItem>
                                            {companyList.map(item => {
                                                    return (
                                                        <MenuItem key={item.id} value={item.id}>
                                                            {item.name}
                                                        </MenuItem>
                                                    );
                                            })}
                                    </Select>
                                    {errors?.type?.customerCompany && (
                                    <FormHelperText>
                                        {errors.type.customerCompany}
                                    </FormHelperText>
                                    )}
                                </FormControl>
                                                    )}
                                                />
                                    );
                              })

What im stuck is how do i reset the values

im using useEffect to reset the values for the ones that are not in a map. but this one i cant figure out

reset({
            isCustomer: customerCompanies.length > 0,
            isResource: resourceCompanies.length > 0,
            isStaff: roles.length > 0,
            staffRoles: roles.length > 0 ? roles : null
        });


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source