При использовании реакционных хуков у меня возникают проблемы при установке начальных значений для редактирования на месте

Question

В моем примере у меня есть 2 поля, имя и фамилия. Я могу правильно прочитать значения из базы данных, и значения правильно заполняются для просмотра.

Проблема заключается в том, что если я не отредактирую одно из двух полей явным образом и нажму кнопку, чтобы обновить значения, локальные переменные для имени и фамилии сохраняют исходные значения, назначенные в useState (в отличие от значения, полученные из базы данных).

Я не могу вызвать useState (для имени и фамилии) после загрузки данных, поскольку React Hooks должен вызываться раньше в функции перед данными, содержащими имя и фамилию, которые читаются, поэтому я вынужден инициализировать их пустыми значениями.

Можно ли мне инициализировать переменные имени и фамилии значениями, считанными из базы данных?

Заранее спасибо! -Derek

Ниже приведены фрагменты кода:

// The use of React Hooks.
const [firstname, setFirstName] = useState("");
const [lastname, setLastName] = useState("");
const { data, error, loading } = useQuery(getProfile);

// Below the values for firstname and lastname aren't being set to the values obtained from useQuery.
<GridContainer>
  <GridItem xs={12} sm={12} md={6}>
    <CustomInput
      inputProps={{
        defaultValue: data.me.firstname,
        onChange: (event) => setFirstName(event.target.value),
      }}
      labelText="First Name"
      id="firstname"
      formControlProps={{
        fullWidth: true
      }}
    />
  </GridItem>
  <GridItem xs={12} sm={12} md={6}>
    <CustomInput
      inputProps={{
        defaultValue: data.me.lastname,
        onChange: (event) => setLastName(event.target.value),
      }}
      labelText="Last Name"
      id="lastname"
      formControlProps={{
        fullWidth: true
      }}
    />
  </GridItem>
</GridContainer>