React - Using State To Update Values, Or Not

I have a form with two columns. The left column is a proposed value for the right column. I currently present both values from separate API calls. This is working. This is the curr

Solution 1:

I'm not sure if this is the correct way to do this, but it works and it also resolves an additional problem of changing an uncontrolled element, when the element is re-rendered, when the state value changes from the API call.

This is where I get the values from the API call and initally setState:

const dbContact = useDbContact(contact.Group);
 const [dbSecName, setDbSecName] = useState("");

I then use useEffect with an async function to wait for the value from the API call and setState using that value:

useEffect(() => {
    asyncfunctiongetDbContact() {
        let secName = await dbContact.SecretaryName;
        setDbSecName(secName);
        }
    getDbContact();
}, [dbContact.SecretaryName]);

I can then use the value in the form input:

<Form.Control type="input" name="2secname" value={dbSecName || ""} readOnly />

Obviously I need to handle the state change in the form input but that should now be straight forward.

I'm no developer so if a better answer comes along I'd be pleased to see it. For now, I seem to have resolved my own problem.