передать значение из другого компонента в пост json данных с реагирующими хуками

Question

как мне получить значения от компонента, который имеет входные данные для компонента, который фактически собирается сделать публикацию? это возможно? или я должен положить все в один компонент? это мой компонент Item:

import React, {useState} from 'react';
import {Col} from 'reactstrap';

export function CustomFieldsItem({item}) {
  const [value, setValue] = useState(false);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <>
      <li className={'list-group-item d-flex border-0'} key={item.id}>
        <Col md={2}>
          <label>{item.label}</label>
        </Col>
        <Col md={10}>
          <input className="form-control" type="text" value={value || item.value} onChange={handleChange} />
 // <-- this is the value I want to pass to my update component when I type on it
// but the save button is in the "update component" (the one under)

        </Col> 
      </li>

    </>
  );
 }

Это мой компонент Обновление:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {post} from '../../common/fetch/fetchOptions';

export function CustomFieldsUpdate({item}) {
  const [value, setValue] = useState(false);

  const updateCustomField = async ({data}) => {
    try {
      await axios(
        post({
          url:'http://localhost:9000/projectcustomfields.json/update/1741?id=party&value=newvalue',

// <-- I want to set the value here, instead of "newvalue" but right now Im happy with just a log of the value from the component above in the console when I click on "Save" button.
// When I save right now I just post hardcoded values (which is what I want to change)

          data: data,
          method: 'POST',
          mode: 'cors',
          withCredentials: true,
          credentials: 'include',
        }),

       );
      console.log(value);
    } catch (e) {
      console.log('Error when updating values: ', e);
    }
  };

  return (
    <div className={'d-flex justify-content-end mr-4'}>
      <button
        type={'button'}
        className={'btn btn-primary mr-2'}
        onClick={updateCustomField}
      >
        Save
      </button>
    </div>
  );
}

У меня есть другой компонент, который перечисляет объекты, которые я хочу обновить, возможно, мне нужно передать значения из этого компонента, может быть, может использовать это?

import React, {useState, useEffect} from 'react';
import {CustomFieldsList} from './customFieldsList';
import {toast} from 'react-toastify';
import {ToastInnerDisplay} from '@learnifier/jslib-utils';
import {CustomFieldsItem} from './customFieldsItem';

export function CustomFieldsContainer({match}) {
  const [value, setValue] = useState({
    data: null,
    loading: true,
    error: null,
  });

  /**
   * Initial loading of data.
   */
   async function fetchData() {
     setValue({...value, error: null, loading: true});
    try {
      let url = `http://localhost:9000/projectcustomfields.json/list/1741`;
      const res = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        withCredentials: true,
        credentials: 'include',
      });
      let data = await res.json();
      setValue(prevValue => ({...prevValue, data: data.customFields, loading: false}));
    } catch (error) {
      toast.error(<ToastInnerDisplay message={error.message} />);
      setValue({...value, error, loading: false});
    }
  }

  useEffect(() => {
     fetchData();
  }, []);

  if (value.loading) {
    return <div>loading...</div>;
  } else if (value.error) {
    return <div>ERROR</div>;
  } else {
    return (
      <div className={'section-component'}>
        <div className={'col-md-6 col-sm-12'}>
          <h2>Custom Fields</h2>
          <CustomFieldsList setValue={setValue} list={value.data} />
        </div>
      </div>
    );
    // return <ChildComponent data={value.data} />
  }
}

Я рендеринг компонентов со списком компонентов:

import React from 'react';
import {CustomFieldsItem} from './customFieldsItem';
import {CustomFieldsUpdate} from './customFieldsUpdate';

export function CustomFieldsList({list, setValue, update, 
updateCustomField}) {
  console.log(list);
console.log(update);
  return (
    <>
      <form>
        <ul className={'list-group border-0'}>
          {list.map(item => (
            <CustomFieldsItem item={item} key={item.id} />
          ))}
        </ul>
        <CustomFieldsUpdate updateCustomField={updateCustomField} setValue={setValue}/>
       </form>
    </>
  );
}