React Hook Form заполняет массив полей переданными данными

Question

Очень новинка, чтобы реагировать на формы хуков, и у меня проблемы с отображением JSON данных, полученных из вызова API.

Вот моя страница:

class UserDataPage extends Component {
    constructor(props) {
        super(props);
        this.state = {userId: localStorage.getItem("userId") || "", newData: {}, dataId: "", isLoading: false};
    }

    dbGetData = async function (userId) { // Get Data from API here
    /*  {daily: {last_received_utc: "date", radios:[
            {id: "ID_001", frequency: "d", progress: 0, progress_max: 5, exp: 1000},
            {id: "ID_002", frequency: "f", progress: 0, progress_max: 1, exp: 1000},
        ]}, 
        monthly: {same as daily, but more}} */
        return response.data;
    };

    componentDidMount() {
        if (this.state.userId.length > 0) {
            this.setState({isLoading: true});
            this.dbGetData(this.state.userId).then((data) => {
                this.setState({isLoading: false});
                this.setState({dataId: JSON.parse(data[0].id)});
                this.setState({newData: JSON.parse(data[0].data)});
            });
        }
    }

    render() {
        const { isLoading, dataId, newData } = this.state;
        return (
            <Container className={this.props.className}>
                <Box paddingBottom={5}>
                    {isLoading && <Spinner animation="border" />}
                    <Accordion defaultActiveKey="daily_challenge">
                        <UserRadioForm dataId={dataId} newData={newData}/>
                    </Accordion>
                </Box>
            </Container>
        );
    }
}

UserDataPage.propTypes = { formData: PropTypes.object };

export default styled((UserDataPage)) ({
    "& .jumbo": {
        WebkitTextStroke: "2px black",
        color: "white",
        fontWeight: "bold",
        // backgroundImage: "radial-gradient(#ffecb3, #cddc39)"
    }
});

А вот и мой форма:

const UserRadioForm = (data) => {
    let dataId = data.dataId;
    let newData = data.newData;
    const { register, control, handleSubmit, errors } = useForm({ defaultValues: newData });
    const {fields, remove, append} = useFieldArray({control, name: "daily.radios"});
    const onSubmit = (data) => {console.log(data);};

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Button type="submit" style={{ marginLeft: "auto" }}>Save Changes</Button>
            <Card>
                <Card.Header>
                    Daily
                </Card.Header>
                <Card.Body>
                    Last Received Date:
                    <input name={"dailylastRcvdDateRequired"} ref={register({ required: true })} defaultValue={newData.daily.last_received_utc} />
                    {/* errors will return when field validation fails  */}
                    {errors.dailylastRcvdDateRequired && <span>This field is required</span>}
                    {fields.map((item, index) => { return (
                        <Box key={index}>
                            <Card.Header>ID: {item.id}</Card.Header>
                            <Card.Body>
                                Frequency: 
                                {frequency[item.frequency] || item.frequency}
                                Progress:
                                <input name={`daily.radios[${index}].progress`} defaultValue={`${item.progress}`} ref={register({required: true})}/>
                                Max Progress:
                                <input name={`daily.radios[${index}].progress_max`} defaultValue={`${item.progress_max}`} ref={register({required: true})}/>
                                Experience:
                                <input name={`daily.radios[${index}].exp`} defaultValue={`${item.exp}`} ref={register({required: true})}/>
                            </Card.Body>
                        </Box>              
                        );
                    })}
                </Card.Body>
            </Card>
        </form>     
    );
}

export default UserRadioForm;

Проблема в том, что fields в UserChallengeForm, похоже, ничего не содержит. Я console.log выхожу из него, прежде чем установить его как defaultValues, и там есть некоторые значения, но по какой-то причине это просто не выполняется. Таким образом, с пустым fields форма никогда не создается (.map не работает). Я что-то пропустил?

Кроме того, это только с учетом дневных рад ios. Понятия не имею, как показывать ежемесячно. Секунда fields?