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

Question

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>
  );
}

Answer 1

I got some help and the solution is:

Stackblitz: https://stackblitz.com/edit/react-ts-m2s6ev?file=index.tsx

---

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 [category2, setCategory2] = useState();
  const [data, setData] = useState(null);
  const { register, handleSubmit, resetField } = useForm<FormValues>({
    defaultValues: {
      lastName: '',
      favShow: '',
    },
  });

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

      setCategory2(data);
    }

    FetchData();
  }, []);

  React.useEffect(() => {
    if (category2) {
      const obj = JSON.parse(JSON.stringify(category2));

      console.log(obj);

      resetField('lastName', { defaultValue: obj.discountPercentage });
      resetField('favShow', { defaultValue: obj.category });
    }
  }, [resetField, category2]);

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

  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>
  );
}