Как декомпозировать логику что бы избежать лишних рендеров родительского компонента из-за useState?

Question

[JavaSscriptNoob]

Всем привет у меня есть компонент BasicForm который будет рендерить разные виды форм в зависимости от пропса type , напр : форму логина , форму создания чего либо и тд ... В этот компонент пропсами обязательно должны приходить пропс inputColumns который являет собой поля которые мы будем рендерить в дочерних комп. нашей формы , сейчас он написан в самой компоненте формы , но хотелось бы что он приходил через пропсы , его вид примерно такой :

const inputColumns = [
    {
      value: title,
      handleInputChange: setTitle,
      fieldName: "title",
    ...
    },
    {
      value: description,
      handleInputChange: setDescription,
      fieldName: "description",
     ...
    },
  ];

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

const callbacks=[fn1,fn2] ; inputColumns.map((item,i)=>{...item,handleInputChange: callbacks[i]})

, такая идея кажется мне мягко говоря не очень .
) . Да , я мог бы передевать туда функцию сразу , но я хочу использовать в дочерних компонентах setState , и уже функцию изменения стейта ложить в качестве функции . Может кто нибудь подкинет светлую идею ? Спасибо ! Вот код компоненты BasicForm

{
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");  // все useState хочу поместить в дочерние комп. что бы избежать лишних ре-рендеров

  const inputColumns = [ // этот массив должен приходить в пропсах
    {
      value: title,
      handleInputChange: setTitle,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "[e-mail]",
      label: "Enter title",
      fieldName: "title",
    },
    {
      value: description,
      handleInputChange: setDescription,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "your first name",
      label: "Enter description ",
      fieldName: "description",
    },
  ];

  const data = inputColumns.reduce( // собираю данные для отправки на сервер
    (acc, field) => {
      return acc.hasOwnProperty(field.fieldName)
        ? { ...acc }
        : { ...acc, [field.fieldName]: field.value };
    },
    { userId }
  );

  const handleButtonClick = () => {
    buttonClickAction(data);
  };
  const renderBasicForm = (type) => { // функция которая ренедрит форму в зависимости от type
    switch (type) {
      case CREATE_FORM:
        return (
          <CreateItemForm // в этой форме будут все useState с состояниями , внутри этой комп. я хотел бы прсваивать функц. useStat'a в inputColumns
            handleButtonClick={handleButtonClick}
            inputColumns={inputColumns}
          />
        );
      default:
        <div>There is no data to display</div>;
    }
  };
  return <Box>{renderBasicForm(type)}</Box>;
}