Registering nested objects with React Hook Form

Question

I have been working with RHF for a while and it helps a lot actually, but I have been trying to do something for what I have not enough knowledge maybe.

So the thing its that I have a nested object that I bring to my componen throw props

const Child = ({ globalObject, register }) => {
    const renderNested = Object.entries(globalObject.nestedObject);
    

    return (
                        <span>
                            {renderNested.map(([key, value], index) => {
                                return (
                                    <div key={index}>
                                        <Field
                                            type="text"
                                            label={key}
                                            name{`nestedObject.${key}`}
                                            defaultValue={value}
                                            ref={register}
                                        />
                                    </div>
                                );
                            })}
                        </span>

    );
};

All good, now, one of the keys inside this nestedObject has another object as a value, for which when I map over them and display, the field will show: [object Object] I know how I would solve that issue if I am using a useState, for example. Not sure if its a good practice but I would go with something like:

defaultValue={typeof value === 'someKey' ? value[key] : value}

but in this case using register (which I want to use since it saved me from other nightmares) I am not sure how to solve this. Should I filter the array outside and then render for one side the keys that dont have an object as a value and then the rest? It looks to me like it has to be something better than that. Can anyone give advices?

just to clarify, nestedObject looks like:

nestedObject: {
key: value
key: {key:value}
}