Реализовать зависимость полей ввода значений в React

Вопрос в следующем подскажите как решить более корректно таску: есть компонент: в виде модалки с 2 кнопками(курицы и петухи) и 4 полями ввода( в зависимости от категории веса). В зависимости от нажатой кнопки отображаются дефолтные значения в % суммарно должно быть 100% и 4 под группы, каждая со своими значениями. Необходимо отрефакторить так, чтобы при изменении условно 1-ого поля ( по дефолту 7) на условно 9 разница должна уходить в поле выше( то есть от группы выше отниматься разница) - это если задать значение выше, а если задать ниже дефолтный то соответственно значения в поле выше должны увеличиваться на разницу и так далее по каждой под группе. и чтобы значения динамически менялись и сохранялись. вот что успел сделать:

const defaultValues = {
  hen: {
    lightMinus: 7,
    light: 18,
    medium: 50,
    heavy: 25,
  },
  rooster: {
    lightMinus: 11,
    light: 22,
    medium: 45,
    heavy: 22,
  },
};

const [values, setValues] = useState(defaultValues);
const [selectedGroup, setSelectedGroup] = useState('hen');

useEffect(() => {
  if (open) {
    setValues(defaultValues);
  }
}, [open]);

const [value1, setValue1] = useState(String(defaultValues.hen.lightMinus));
const [value2, setValue2] = useState(String(defaultValues.hen.light));
const [value3, setValue3] = useState(String(defaultValues.hen.medium));
const [value4, setValue4] = useState(String(defaultValues.hen.heavy));

const handleInputChange = (field, value) => {
  handleValueChange(selectedGroup, field, value);
};

const handleValueChange = (group, field, value) => {
  setValues((prevValues) => {
    const updatedGroup = {
      ...defaultValues[group],
      [field]: value,
    };

    const fields = Object.keys(updatedGroup);
    let difference = 0;
    

    fields.forEach((f) => {
      if (f === field) {
        difference = value - defaultValues[group][f];
      }
    });
    ;
    

    const distributedDiff = difference;

    const updatedGroupFields = fields.reduce((acc, f) => {
      if (f !== field) {
        acc[f] = Math.max(0, updatedGroup[f] + distributedDiff);
      } else {
        acc[f] = value;
      }
      return acc;
    }, {});

    return {
      ...prevValues,
      [group]: updatedGroupFields,
    };
  });
};

const resetValues = (group) => {
  const defaultValues =
    group === 'hen'
      ? {
          lightMinus: 7,
          light: 18,
          medium: 50,
          heavy: 25,
        }
      : {
          lightMinus: 11,
          light: 22,
          medium: 45,
          heavy: 22,
        };

  setValues((prevValues) => ({
    ...prevValues,
    [group]: defaultValues,
  }));
};

const handleValue1Change = (event) => {
  const value = event.target.value;
  if (value === '' || (!isNaN(value) && !/^\s+$/.test(value))) {
    setValue1(value);
    handleInputChange('lightMinus', value === '' ? '' : parseInt(value));
  }
};

const handleValue2Change = (event) => {
  const value = event.target.value;
  if (value === '' || (!isNaN(value) && !/^\s+$/.test(value))) {
    setValue2(value);
    handleInputChange('light', value === '' ? '' : parseInt(value));
  }
};

const handleValue3Change = (event) => {
  const value = event.target.value;
  if (value === '' || (!isNaN(value) && !/^\s+$/.test(value))) {
    setValue3(value);
    handleInputChange('medium', value === '' ? '' : parseInt(value));
  }
};

const handleValue4Change = (event) => {
  const value = event.target.value;
  if (value === '' || (!isNaN(value) && !/^\s+$/.test(value))) {
    setValue4(value);
    handleInputChange('heavy', value === '' ? '' : parseInt(value));
  }
};

const handleGroupChange = (group) => {
  setSelectedGroup(group);

  if (group === 'hen') {
    setValue1(String(defaultValues.hen.lightMinus));
    setValue2(String(defaultValues.hen.light));
    setValue3(String(defaultValues.hen.medium));
    setValue4(String(defaultValues.hen.heavy));
  } else if (group === 'rooster') {
    setValue1(String(defaultValues.rooster.lightMinus));
    setValue2(String(defaultValues.rooster.light));
    setValue3(String(defaultValues.rooster.medium));
    setValue4(String(defaultValues.rooster.heavy));
  }
};


<StyleTypography>{t('Легкая-')}</StyleTypography>

            <TextField
              variant="outlined"
              value={value1}
              onChange={handleValue1Change}
              sx={{
                width: { md: '400px', lg: '600px' },
                height: { md: '90px', lg: '120px' },
                backgroundColor: 'white',
                '& input': {
                  fontSize: '65px',
                },
              }}
              required
              type="number"
              inputProps={{
                pattern: '[0-9]*',
              }}
            />