Отправить значение базовому класу от дочерного и использовать в функции

Имеются две проблемы, в первой что значение select устанавливается предварительное т.е. меняю один input и сразу меняется select на другие данные но значение остается предыдущее.

Нужно чтобы значение которое изменяеться в доречном класе отправлялось в базовый и потом использовалось в функции formatAmountFromLimit которая вызываеться и принимает даное значение в теле лямбды

Базовый

Fields:

function LimitsFields (props) {
  const [unit, setUnit] = useState(props.limit.unit)


  return <Form onSubmit={onSubmit}>
   

      <Form.Group controlId='formGridLimitAmount' as={Col}>
        <Form.Label>Limit Amount</Form.Label>
        <Form.Control
            type='text'
            value={ limitAmount }
            onChange={e => {
              setLimitAmount(formatAmountFromLimit(e.currentTarget.value,unit))
            }}/>
      </Form.Group>
      <Form.Group controlId='formGridUnit' as={Col}>
        <Form.Label>Unit</Form.Label>
          <UnitsDropdown
              unit={unit}
              setUnit={setUnit}
              limitType={limitType}
              entityType={entity}
              siteGroup={siteGroup}
              riskType={riskType}
              isUpdate={isUpdate}/>
      </Form.Group>
    </Form.Row>
  </Form >
}

export default LimitsFields

Дочерний где изменяеться значение

import React, {useState, useEffect} from 'react'

const UnitsDropdown = ({
                           unit,
                           setUnit,
                           limitType,
                           entityType,
                           riskType,
                           isUpdate,
                       }) => {
    const [items, setItems] = useState([
        {label: unit || 'Loading...', value: unit || ''}
    ])

    useEffect(() => {
        if (limitType === '') {
            setItems([{label: 'All', value: ''}])
        }
        if (limitType && !isUpdate && entityType) {
            getUnits()
        }
        if (isUpdate) {
            getUnits()
        }
    }, [limitType, entityType])

    const getUnits = async () => {
        await fetch('api/units?limitType=' + limitType)
            .then(res => res.json())
            .then(body => {
                setItems(body.map((name) => ({label: name, value: name})))
            }).catch(e => {
                console.log('UnitsDropdown Error' + e)
            })
    }



    return (
        <select className="form-control" disabled={isUpdate && riskType !== 'LENDING'} value={unit}
                required={isUpdate && riskType !== 'LENDING'}

                onChange={e => {
                    setUnit(e.currentTarget.value)
                    handleUnitChange(e)
                }}>
            {items.map(({label, value}) => (
                <option key={value} value={value}>
                    {label}
                </option>
            ))}
        </select>
    )
}
export default UnitsDropdown

Функция formatAmountFromLimit в базовом(Fields) где нужно применить новое значение

<Form.Group controlId='formGridLimitAmount' as={Col}>
        <Form.Label>Limit Amount</Form.Label>
        <Form.Control
            type='text'
            value={ limitAmount }
            onChange={e => {
              setLimitAmount(formatAmountFromLimit(e.currentTarget.value,unit))
            }}/>
</Form.Group>