जावास्क्रिप्ट फ़ंक्शन पूरा होने पर सबमिट करने पर कॉल कर रहा है

मेरे पास एक बटन है जो किसी ऑब्जेक्ट से एक फोटो को हटा देता है जिसमें एकाधिक फोटो होते हैं:

<button class="btn" onClick={()=> this.removePhoto(index)}>remove</button>

किसी कारण से removePhoto फ़ंक्शन चलने के बाद यह ऑनसबमिट फ़ंक्शन पर जारी रहता है। केवल एक चीज जो मैं सोच सकता हूं कि इसका कारण बंधन हो सकता है, लेकिन मैं अभी भी प्रतिक्रिया करने के लिए बिल्कुल नया हूं इसलिए मुझे यकीन नहीं है कि इसे कैसे ठीक किया जाए।

export default class Edit extends Component {
  constructor() {
    super();
    this.state = {
        id: '',
        title: '',
        description: '',
        photos: [], 
        categories: [],
        selectedFile: '',
        selectedFiles: '',
        photo: '',
        tags: [],
        tagName: '',
    };  
    this.removePhoto = this.removePhoto.bind(this);
   }
   
 
  onSubmit = (event) => {
    event.preventDefault(); 
    const photoCatUpdate = this.state.photos.map((obj, index) => {  
      obj.tag = this.state.tagName
      return obj
    });

    const photos = JSON.stringify(photoCatUpdate)
    let body = {
        title: this.state.title,
        description : this.state.description,
        photos: photos,
        tags: this.state.tagName
    }
    let id = this.state.id

    fetch('/api/categories/' + id, {
      method: 'put',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => {
      if (res.status === 200) {
          console.log("WORKED!!")
          this.props.closeModal()
          this.props.getCategory()
       
      } else {
        const error = new Error(res.error);
        throw error;
      }
    })
  }

        addPhoto = () => {
          const photosNew = this.state.photos
          const photo = this.state.photo
          photosNew.push({
            photo: photo,
            title: '',
            thumbnail: false,
            image1: false,
            image2: false,
            tag: '',
          });
          this.setState({photos: photosNew});
          this.setState({photo: '', selectedFile: '', selectedFiles: ''})
          document.getElementById("myFile").value = "";
        }
         
  removePhoto = (i) => {
    debugger
    const photos = this.state.photos
    const objIndex = photos.filter((obj, index) => {
      if(index != i){
        return obj
      }
    });

    console.log("objIndex", objIndex)

    this.setState({photos: objIndex})
    
  }
   
  updatePhotoObj = (event) => {
    const { value, id } = event.target;
    console.log("value", value)
    console.log("event.target", event.target)
    
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.title = value
      }
      return obj
    });

    this.setState({photos: objIndex})

  }
  handleInputChangeRadio = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.thumbnail = true
      }else{
        obj.thumbnail = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
  handleInputChangeOne = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.image1 = true
      }else{
        obj.image1 = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
  handleInputChangeTwo = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.image2 = true
      }else{
        obj.image2 = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
   
  render() {
    const table = {
      width: '100%',
      paddingTop: '20px'
     }
   
    return (
      <> 
     

     <div class="col-md-12">  
    <form onSubmit={this.onSubmit}>
    <div class="form-group">
    <label>Title</label>
     <input
           class="form-control" 
           type="text"
          name="title"
          placeholder="Enter title"
          value={this.state.title}
          onChange={this.handleInputChange}
        />
        </div>
        
        <div class="form-group">
    <label>Description</label>
     <textarea
           class="form-control" 
           type="text"
           rows="10" 
          name="description"
          placeholder="Enter title"
          value={this.state.description}
          onChange={this.handleInputChange}
        />
        </div>

        <div class="form-group">
        <label for="inputTag">Tag</label>
        <select id="inputTag" class="form-control"
                        value={this.state.tagName}
                        name="tagName"
                        onChange={this.handleInputChange}
                        >
                           <option  value="" disabled selected>Please Choose...</option>
                        {this.state.tags.map(s =>  
                            <option selected>{s.name}</option>
                        )}
                        </select>
        </div>
        <div class="form-row">
        <label>New Photo</label>
        </div>
        <div class="form-row">
       <input type="file" id="myFile" onChange={this.singleFileChangedHandler}/>   
          <button className="btn btn-secondary" onClick={this.singleFileUploadHandler}>Add Photo</button>
          </div>
      
        <div class="form-row">
        {this.state.photos.length > 0 ?
          <div style={table}>
         
          <div class="table-responsive-sm">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">photos</th>
                                    <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                                
                                </tr>
                            </thead>
                            <tbody>
                            
                {this.state.photos.map((x, index) => {
                return (
                  <>
                  <tr>
                        <td > <img src={x.photo} alt=""/></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td> 
                          <button class="btn" onClick={()=> this.removePhoto(index)}>remove</button>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="thumb" id={index} 
                            name="thumb"
                            checked={x.thumbnail}
                            onChange={this.handleInputChangeRadio}
                            />
                            <label class="form-check-label" for="thumb">
                              Thumbnail
                            </label>
                          </div>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="one" id={index} 
                            name="one"
                            checked={x.image1}
                            onChange={this.handleInputChangeOne}
                            />
                            <label class="form-check-label" for="one">
                              Image 1
                            </label>
                          </div>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="two" id={index} 
                            name="two"
                            checked={x.image2}
                            onChange={this.handleInputChangeTwo}
                            />
                            <label class="form-check-label" for="two">
                              Image 2
                            </label>
                          </div>
                        </td>
                       
                      </tr>
                       <tr>
                      <input
                   class="form-control" 
                   type="text"
                   value={x.title}
                   id={index}
                   onChange={this.updatePhotoObj}
                 />
                 </tr>
              </>
                );
                
              })}
                
                            </tbody>
                        </table>
                    </div>
          </div>
        :
        null
     
      
      }
      
       </div>
     
        <div class="modal-footer"> 
       <input type="submit" value="Submit" class="btn btn-primary"/>
       <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick={this.handleClose}>Close</button>
       </div>
      </form> 
      </div>
    
      </>
      );
    
    }
  }