Реагировать на крючки useState — ввод текста теряет фокус при вводе, если форма передается через реквизиты

Ваша проблема в том, что вы определяете анонимные функции и рассматриваете их как компоненты React, что хорошо во многих случаях, но здесь React теряет понимание основного содержимого этих функций. Это означает, что даже добавление ссылок или ключей на вход ничего не даст, так как внешняя область видимости каждый раз просто видит совершенно новую функцию.

Задумайтесь на секунду: вместо того, чтобы писать <Content />, вы пишете <>{Content()}</>

Это даст тот же результат, но показывает, что каждый раз, когда Layout отображается, он имеет совершенно другое представление о том, каковы его свойства, и, таким образом, каждый раз отображает все заново. Поскольку ввод быстро заменяется новым, но другим вводом, браузер теряет фокус в поле. Но это также может вызвать массу других проблем.

Вместо этого замените <Content /> на {content} и не пропускайте анонимную функцию — вместо этого просто передайте необработанный JSX как есть, и он больше не будет повторно отображать дочерние элементы.

import React, { useState } from 'react';

function Layout({ content, sidebar }) {
  return (
    <>
      <div>
        {content}
      </div>
      <div>
        {sidebar}
      </div>
    </>
  );
}

function Page() {
  const [value, setValue] = useState('');
  return (
    <>
      <Layout
        content={(
          <input
            value={value}
            onChange={(event) => setValue(event.target.value)}
          />
        )}
        sidebar={(
          <p>Lorem ipsum...</p>
        )}
      />
    </>
  );
}

export default Page;

Проблема в том, что когда Content визуализируется как компонент реакции внутри Layout, каждый раз, когда Page перерисовывается, создается новый экземпляр функций content и sidebar, из-за этого реакция перемонтирует компонент по мере изменения ссылок на функции, потому что функции воссоздаются при каждом рендеринге внутри компонента реакции, и поэтому фокус ввода теряется.

Вы можете использовать компоненты content и sidebar в качестве реквизита рендеринга. Свойство рендеринга — это свойство функции, которое компонент использует, чтобы знать, что отображать. Вызовите функции внутри Layout для рендеринга Content и Sidebar.

function Layout({ content: Content, sidebar: Sidebar }) {
  return (
    <>
      <div>{Content()}</div>
      <div>{Sidebar()}</div>
    </>
  );
}

function Page() {
  const [value, setValue] = useState("");

  return (
    <>
      <Layout
        content={() => (
          <input
            value={value}
            onChange={event => setValue(event.target.value)}
          />
        )}
        sidebar={() => <p>Lorem ipsum...</p>}
      />
    </>
  );
}