Reactで1文字ごとに入力欄のフォーカスが外れる原因と直し方

export function NestedForm() {
  const [name, setName] = useState('');

  function NameField() {
    useEffect(() => {
      log('マウント（NameField）');
      return () => log('アンマウント（NameField）');
    }, []);
    return <input value={name} onChange={(e) => setName(e.target.value)} />;
  }

  return (
    <div>
      <NameField />
      <p>入力した名前：{name}</p>
    </div>
  );
}

--- NestedForm ---
  [マウント（NameField）]
  > 入力欄をクリックして、キーボードで "neko" と打つ（1文字ずつ）
  [アンマウント（NameField）]
  [マウント（NameField）]
  「n」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「e」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「k」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「o」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false

  「n」のあと: 入力欄="n" ／ フォーカス=body
  [アンマウント（NameField）]
  [マウント（NameField）]
  「e」のあと: 入力欄="ne" ／ フォーカス=body

type NameFieldProps = {
  value: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
};

function NameField({ value, onChange }: NameFieldProps) {
  // （マウントを記録する useEffect は省略）
  return <input value={value} onChange={onChange} />;
}

export function TopLevelForm() {
  const [name, setName] = useState('');
  return (
    <div>
      <NameField value={name} onChange={(e) => setName(e.target.value)} />
      <p>入力した名前：{name}</p>
    </div>
  );
}

--- TopLevelForm ---
  [マウント（NameField）]
  > 入力欄をクリックして、キーボードで "neko" と打つ（1文字ずつ）
  「n」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「e」のあと: 入力欄="ne" ／ 入力した名前：ne ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「k」のあと: 入力欄="nek" ／ 入力した名前：nek ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「o」のあと: 入力欄="neko" ／ 入力した名前：neko ／ フォーカス=input ／ 最初と同じ input 要素か=true

export function JsxVariableForm() {
  const [name, setName] = useState('');
  const nameField = <input value={name} onChange={(e) => setName(e.target.value)} />;
  return (
    <div>
      {nameField}
      <p>入力した名前：{name}</p>
    </div>
  );
}

--- JsxVariableForm ---
  > 入力欄をクリックして、キーボードで "neko" と打つ（1文字ずつ）
  「n」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「e」のあと: 入力欄="ne" ／ 入力した名前：ne ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「k」のあと: 入力欄="nek" ／ 入力した名前：nek ／ フォーカス=input ／ 最初と同じ input 要素か=true
  「o」のあと: 入力欄="neko" ／ 入力した名前：neko ／ フォーカス=input ／ 最初と同じ input 要素か=true

export function UseCallbackForm() {
  const [name, setName] = useState('');

  const NameField = useCallback(() => {
    return <input value={name} onChange={(e) => setName(e.target.value)} />;
  }, [name]);

  return (
    <div>
      <NameField />
      <p>入力した名前：{name}</p>
    </div>
  );
}

--- UseCallbackForm ---
  > 入力欄をクリックして、キーボードで "neko" と打つ（1文字ずつ）
  「n」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「e」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「k」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false
  「o」のあと: 入力欄="n" ／ 入力した名前：n ／ フォーカス=body ／ 最初と同じ input 要素か=false

import tseslint from 'typescript-eslint';
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  { files: ['src/**/*.tsx'], languageOptions: { parser: tseslint.parser } },
  reactHooks.configs.flat.recommended,
];

/path/to/app/src/cases.tsx
  19:8  error  Error: Cannot create components during render

Components created during render will reset their state each time they are created. Declare components outside of render.
（中略）
  71:8  error  Error: Cannot create components during render
（中略）
✖ 2 problems (2 errors, 0 warnings)