为什么鼠标点击会触发两个按钮？

Question

  {(next) ? (
          <input
            style={{
              width: '112px',
              height: '55px',
              marginLeft: '-124px',
              backgroundColor: '#2A00A3',
              color: 'white',
            }}
            value="Next >"
            type="button"
            onClick={onNext}
            className="btn rounded-full p-4"
          />
        ) : (
          <input
            style={{
              width: '112px',
              height: '55px',
              marginLeft: '-124px',
              backgroundColor: '#2A00A3',
              color: 'white',
            }}
            value="Submit"
            type="submit"
            className="btn rounded-full p-4"
          />
        )}

上面提到的按钮是有条件地呈现的。现在，当我单击“下一步”按钮并根据条件将“下一步”按钮替换为“提交”按钮时，关联的回调函数和表单提交都会被触发，这不应该发生。我该如何解决这个问题？