How to use id generated from database for key prop instead of using field.id in useFieldArray while calling remove method?

[190303458]

Suppose contactPersons is an array of objects consisting of id of type Long as one of the attributes, id is generated from database and default value of contactPersons is retrieved from api call to a spring boot backend server. Since useFieldArray automatically generates a unique id of type string which is used for key prop, is it possible to use the id generated from database for key prop and instead of using the built-in field.id?
I did some research and find that I can add keyName: "reactHookFormId" as prop in useFieldArray so that the automatically-generated id will be assigned to custom keyName reactHookFormId instead of overriding the Long value of id in the object. However, react-hook-form documentation states that "This prop is no longer required and will be removed in the next major version.". Thus this approach can't be used.

export const UseFieldArrayDemo = () => {
    const {control, handleSubmit} = useForm({
        defaultValues: {
            contactPersons: [
                {id: 1001, name: "a", email: "[email protected]"},
                {id: 1002, name: "b", email: "[email protected]"},
                {id: 1003, name: "c", email: "[email protected]"}
            ],
            removedContactPersons: []
        }
    });

    const {fields, append, remove} = useFieldArray({
        control,
        name: "contactPersons"
    });

    const {fields: removedContactPersonFields, append: appendRemovedContactPerson} = useFieldArray({
        control,
        name: "removedContactPersons"
    });

    const handleClickRemove = index => {
        remove(index);
        const removedContactPerson = fields[index];
        console.log("removedContactPerson..........", removedContactPerson)
        appendRemovedContactPerson(removedContactPerson)
        console.log("removedContactPersonFields..........", removedContactPersonFields)
    }

    const onSubmit = data => console.log(data)

    return (
        <Container disableGutters maxWidth="sm">
            <Box noValidate component="form" onSubmit={handleSubmit(onSubmit)}>
                <Grid container rowSpacing={3}>
                    <Grid xs={12}>
                        <Button
                            variant="outlined"
                            disabled={fields.length === 3}
                            onClick={() => append({name: "", email: ""})}
                        >
                            Add
                        </Button>
                    </Grid>

                    {fields.map((field, index) => (
                        <Grid container key={field.id}>
                            <Grid xs={5} pr={1}>
                                <Controller
                                    name={`contactPersons.${index}.name`}
                                    control={control}
                                    render={({field}) => (
                                        <TextField
                                            {...field}
                                            fullWidth
                                            label="Name"
                                            InputLabelProps={{shrink: true}}
                                        />
                                    )}
                                />
                            </Grid>
                            <Grid xs={6} pl={1}>
                                <Controller
                                    name={`contactPersons.${index}.email`}
                                    control={control}
                                    render={({field}) => (
                                        <TextField
                                            {...field}
                                            fullWidth
                                            label="Email"
                                            InputLabelProps={{shrink: true}}
                                        />
                                    )}
                                />
                            </Grid>
                            <Grid xs={1}>
                                <IconButton onClick={() => handleClickRemove(index)}>
                                    <DeleteIcon/>
                                </IconButton>
                            </Grid>
                        </Grid>
                    ))}

                    <Grid xs={12}>
                        <Button type="submit" variant="contained">Submit</Button>
                    </Grid>
                </Grid>
            </Box>
        </Container>
    )
}