Retriving data for input radio won't make a default selection

[jt4000]

Goal:
Retrieve data 'smartphones', by API, and apply it as a default selection in the input radio component for the react hook form.

Problem:
The code do not work that makes smartphones as a preselection in the input radio button.
However, if I make a change by using hard coding, it works but hard coding do not solve the case.

I don't know how to solve it.

Info:
*Using React TS and React hook form.
*Newbie in react TS and hook form.

Stackblitz:
https://stackblitz.com/edit/react-ts-z9cnzl

Thank you!

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import './style.css';

type FormValues = {
  lastName: string;
  favShow: string;
};

export default function App() {
  const [category, setCategory] = useState('');

  React.useEffect(() => {
    async function FetchData() {
      var data = await fetch('https://dummyjson.com/products/1').then((res) => {
        return res.json();
      });

      console.log(data.category);
      setCategory(data.category);
    }

    FetchData();
  }, []);

  const [data, setData] = useState(null);
  const { register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      lastName: 'asaaaaaaf',
      favShow: category,
      //favShow: 'smartphones',
    },
  });

  const onSubmit = (data) => {
    setData(data);

    console.log('asdf');
  };

  return (
    <React.Fragment>
      <form onSubmit={handleSubmit(onSubmit)} className="form-container">
        <h1 className="form-heading">React Hook Form Example</h1>
        <input
          {...register('lastName', { required: true })}
          className="form-control"
          type="text"
          placeholder="Last name"
          maxLength={15}
          name="lastName"
        />

        <br />
        <br />

        <label htmlFor="ted-lasso">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="smartphones"
            id="smartphones"
          />{' '}
          smartphones
        </label>

        <label htmlFor="got">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="GOT"
            id="got"
          />
          GOT
        </label>

        <br />
        <br />

        <button className="submit-btn" type="submit">
          Submit
        </button>
      </form>

      {data && <p className="submit-result">{JSON.stringify(data)}</p>}
    </React.Fragment>
  );
}

[Moshyfawn]

RHF initializes your form with the provided default values only ones when the useForm hook is first called with the provided defaultValues.

There're different approach you can choose to provide the async default values to your form. In your case, since there's only one async field value, you can utilize the resetField form method to "update" your default field value once you get it.

const { resetField } = useForm()

useEffect(() => {
  if (category) {
    resetField("favShow", { defaultValue: category })
  }
}, [resetField, category])

Check out this working codesandbox

[jt4000]

Thank you for your help!