Неправильные входные значения React

У меня есть 2 контролируемых входа, которые принимают значение и сохраняют его в редукции.

У меня проблема с тем, что safari принимает неправильное значение из этих входов, он отлично работает в chrome и firefox.

например, пользователь введет 1 во вход 1, а затем 2 во вход 2, и я могу видеть через журнал консоли, что значение обновляется на входе 1 как 1, но на входе 2 как 12, и если пользователь снова вводит 3 во вход 1 затем он показывает 123

Он также будет отображать значение в поле ввода только при 3-м нажатии клавиши, но будет регистрировать значения, введенные при 1-м и 2-м нажатии клавиш.

Как я могу заставить сафари хранить правильные значения?

DimensionBox.js

class DimensionBox extends React.Component {
  handleChangeEvent = (event) => {
    this.props.onChange(event.target.value);
  }

  render() {
      <input
      type = "text"
      id = {(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
        name = {(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
      onChange = {this.handleChangeEvent}
      />
    );
  }
};

export default DimensionBox;

SettingDropDimensions.js

class SettingDropDimensions extends React.Component {

  onDimensionValueChange(position, index, value) {

    this.props.setDimension(position, index, value);
    console.info()
  }


  getDimension(position) {
    if (position === 'wing') return position;
    return (position === 'top' || position === 'bottom') ? 'width' : 'height';
  }
  getBoxLabel(position, counter) {

    if (position === 'wing') return 'FF* Höhe';

    let label = '';
    let totalCount = 0;

    if (this.getDimension(position) === 'height') {
      label += 'Höhe';
      totalCount = this.props.dimensions.dimensions.left.values.length + this.props.dimensions.dimensions.right.values.length;
    } else {
      label += 'Breite';
      totalCount = this.props.dimensions.dimensions.top.values.length + this.props.dimensions.dimensions.bottom.values.length;
    }

    if (totalCount > 1) {
      label += ` ${counter}`;
    }

    return label;

  }

  componentDidUpdate(prevProps) {
    if (this.props.manufacturer && prevProps.manufacturer !== this.props.manufacturer) {
      this.props.setDimensionType('')
      this.props.setDimensionSize('')
    }
    if (this.props.typeValue && prevProps.typeValue !== this.props.typeValue) {
      this.props.setDimensionSize('')
    }
  }

  render() {
        {console.info('dimensions',this.props.dimensions.dimensions)}
        {(this.props.windowShape && this.props.windowShape.id) !== 6 &&
          <DimensionsWrap>
            {Object.keys(this.props.dimensions.dimensions).map((position, pIndex) => {
              const dimension = this.getDimension(position);
                return (
                  <DimensionsCell key = {pIndex}>
                      {this.props.dimensions.dimensions[position].values.map((value, index) => {
                        const counter = ++inputCounter[dimension];
                        return (

                          <DimensionBox
                            key = {index}
                            designation = {this.props.designation.alias}
                            label = {this.getBoxLabel(position, counter)}
                            // value = {value}
                            minWidth = {this.props.minWidth && this.props.minWidth.value * 10}
                            maxWidth = {this.props.maxWidth && this.props.maxWidth.value * 10}
                            minHeight = {this.props.minHeight && this.props.minHeight.value * 10}
                            maxHeight = {this.props.maxHeight && this.props.maxHeight.value * 10}
                            minHeight2 = {this.props.minHeight2 && this.props.minHeight2.value * 10}
                            maxHeight2 = {this.props.maxHeight2 && this.props.maxHeight2.value * 10}
                            minWidth2 = {this.props.minWidth2 && this.props.minWidth2.value * 10}
                            maxWidth2 = {this.props.maxWidth2 && this.props.maxWidth2.value * 10}
                            minWidthSmallTop = {this.props.minWidthSmallTop && this.props.minWidthSmallTop.value * 10}
                            maxWidthSmallTop = {this.props.maxWidthSmallTop && this.props.maxWidthSmallTop.value * 10}
                            onChange = {newValue => this.onDimensionValueChange(position, index, newValue)}
                            isValid = {this.props.dimensions.valid[dimension]}
                            tooltip = {
                              (this.props.dimensions.messages[dimension] && this.props.dimensions.dimensions[position].values.length) > 0 &&
                                <div style = {{ margin: '0 0 0 10px' }}>{this.props.dimensions.messages[dimension]}</div>
                            }
                          />
                        )
                      })}

                  </DimensionsCell>
                )
            })}
          </DimensionsWrap>
        }


      </SettingDrop>
    );
  }
};

actions.js

export function setDimension(position, index, value, isValid) {
  return {
    type: SET_DIMENSION,
    position,
    index,
    value,
    isValid
  };
}

export function setDimensionValid(attribute, isValid) {
  return {
    type: SET_DIMENSION_VALID,
    attribute,
    isValid
  };
}

export function setDimensionMessage(attribute, message) {
  return {
    type: SET_DIMENSION_MESSAGE,
    attribute,
    message
  };
}

export function setDimensionValues(position, values) {
  return {
    type: SET_DIMENSION_VALUES,
    position,
    values
  };
}

reducer.js

const dimensionReducer = (state = {
  dimensions: {
    bottom: {
      values: []
    },
    top: {
      values: []
    },
    right: {
      values: []
    },
    left: {
      values: []
    },
    wing: {
      values: [0]
    }
  },
  valid: {
    angle: true,
    width: false,
    height: false,
    wing: true
  },
  messages: {
    width: '',
    height: '',
    wing: ''
  },
  dormer: {
    manufacturer: '',
    type: '',
    size: '',
  }
}, action) => {
  switch (action.type) {
    case SET_DIMENSION:
      const newState = {
        values: [...state.dimensions[action.position].values]
      };

      newState.values[action.index] = action.value;

      return {
        ...state,
        dimensions: {
          ...state.dimensions,
          [action.position]: newState
        }
      };
      break;
    case SET_DIMENSION_VALUES:
      let changedState = {...state.dimensions[action.position]};

      changedState.values = action.values;

      return {
        ...state,
        dimensions: {
          ...state.dimensions,
          [action.position]: changedState
        }
      };
    case SET_DIMENSION_VALID:
      return {
        ...state,
        valid: {
          ...state.valid,
          [action.attribute]: action.isValid
        }
      };
    case SET_DIMENSION_MESSAGE:
      return {
        ...state,
        messages: {
          ...state.messages,
          [action.attribute]: action.message
        }
      };
    case SET_DIMENSION_MANUFACTURER:
      return {
        ...state,
        dormer: {
          ...state.dormer,
          manufacturer: action.text
        }
      }
    case SET_DIMENSION_TYPE:
    return {
      ...state,
      dormer: {
        ...state.dormer,
        type: action.text
      }
    }
    case SET_DIMENSION_SIZE:
    return {
      ...state,
      dormer: {
        ...state.dormer,
        size: action.text
      }
    }
    default:
      return state;
  }
}

export default dimensionReducer;