Как получать существующие данные кеша при каждом изменении ввода?

В моем приложении есть пользовательский input, id для отправки как request и response data, который соответствует рендерингу id.

Если data уже существует в cache, я бы хотел, чтобы приложение загружалось с cache на каждом input change.

Если data не существует в cache, приложение может отправить request, только если пользователь щелкнет submit button.

Как только пользователь вводит input, я обращаюсь к cache и проверяю, существует ли текущий вход id на каждом input change. Если да, визуализируйте data, а submit button - disabled. В противном случае используйте enable и submit button, чтобы пользователь мог отправить request.

Судя по исследованиям, я считаю, что мне нужно React Query queryClient.getQueryCache. Я бы проверил, существует ли входной id в cache, используя .includes на queryCache. Что бы я делал потом? Это правильное направление для реализации функциональности?

Вот моя текущая установка. Пожалуйста, дайте мне знать, как продолжить реализацию запрошенных функций. https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
    .then((res) => res.data);
  };

const cacheData = queryClient.getQueryData(["rickandmorty", idQuery], {
    exact: false
})

const onInputChange = event => {
    setIdQuery(event.target.value, () => {
        cacheData.includes(idQuery)
            handleRickAndMortyFetch()
    })
}

const disable = isLoading || parseFloat(formId) === idQuery || !idQuery || cacheData?.id === idQuery;

<form onSubmit = {handleSubmit(onSubmit)}>
  <input
    type = "number"
    name = "rickAndMortyId"
    placeholder = "Between 1 and 671"
    ref = {register}
    disabled = {isLoading}
    onChange = {onInputChange}
  />
  <button type = "submit" disabled = {disable}>
    Search Character
  </button>
</form>