Динамические атомные клавиши в Recoil

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

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

Я сделал небольшой рабочий пример здесь https://codesandbox.io/s/zealous-night-e0h4jt?file=/src/App.tsx (тот же код, что и ниже):

import React, { useEffect, useState } from "react";
import { atom, RecoilRoot, useRecoilState } from "recoil";
import "./styles.css";

const textState = (key: string, defaultValue: string = "") =>
  atom({
    key,
    default: defaultValue
  });

const TextInput = ({ id, defaultValue }: any) => {
  const [text, setText] = useRecoilState(textState(id, defaultValue));

  const onChange = (event: any) => {
    setText(event.target.value);
  };

  useEffect(() => {
    return () => console.info("TextInput unmount");
  }, []);

  return (
    <div>
      <input type = "text" value = {text} onChange = {onChange} />
      <br />
      Echo: {text}
    </div>
  );
};

export default function App() {
  const [tabIndex, setTabIndex] = useState(0);

  // This would normally be a fetch request made by graphql or inside useEffect
  const fields = [
    { id: "foo", type: "text", value: "bar" },
    { id: "hello", type: "text", value: "world" }
  ];

  return (
    <div className = "App">
      <RecoilRoot>
        <form>
          <button type = "button" onClick = {() => setTabIndex(0)}>
            Tab 1
          </button>
          <button type = "button" onClick = {() => setTabIndex(1)}>
            Tab 2
          </button>

          {tabIndex === 0 ? (
            <div>
              <h1>Fields</h1>
              {fields.map((field) => {
                if (field.type === "text") {
                  return (
                    <TextInput
                      key = {field.id}
                      id = {field.id}
                      defaultValue = {field.value}
                    />
                  );
                }
              })}
            </div>
          ) : (
            <div>
              <h1>Tab 2</h1>Just checking if state is persisted when TextInput
              is unmounted
            </div>
          )}
        </form>
      </RecoilRoot>
    </div>
  );
}

Возможно ли это даже с отдачей. Я имею в виду, что это работает, но я не могу игнорировать предупреждения.