Триггер отправки формы от дочернего элемента с родительской кнопкой React

Я пытаюсь отправить форму из дочернего компонента с помощью кнопки, размещенной в родительском. Родитель — это слайд с кнопкой «Далее», и я показываю свой дочерний компонент на одной странице слайда.

Что я хочу сделать, так это: когда я нажимаю следующую кнопку от родителя, я должен перейти к следующему слайду, а также отправить дочернюю форму.

код: Родительский компонент:

import Slider from "react-slick";

class Parent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    
      errors: {}
    }
     next() {
        this.slider.slickNext();
      }
      previous() {
        this.slider.slickPrev();
      }
       
      render() {
        const settings = {
          dots: true,
          infinite: false
        };
    
        return (
    <div>
          <Slider ref = {c => (this.slider = c)} {...settings}>
                        <div style = {{ textAlign: "center" }} key = {1} >
                          
                          <Child /> //this is the Child I want to submit once I press Next Button
                          
                          <Button id = "btn" className = "btn btn-primary float-right " type = "submit" onClick = {this.next}> Next</Button> //this is the next button which sould trigger the submit from Child
                        </div>
                        <div key = {2} >
                          <Page2/> 
                          <Button className = "btn btn-primary float-right " id = "btn" onClick = {() =>  this.finish()>Finish</Button>
                          <Button id = "btn" className = "btn btn-primary float-right " onClick = {this.previous}> Previous</Button>
                        </div>           
          </Slider>
    </div>
      );
      }
}

Дочерний компонент:

class Child extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            info: '',
            infoID: 0,
            valid:false,
            errors: {}
        }
this.handleValidSubmit = this.handleValidSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}

handleValidSubmit() {
    if (valid){
        localStorage.setItem("infoID",this.state.infoID);
        this.sendIDToServerAPI(infoID);
       }else {
        localStorage.setItem("infoID",this.state.infoID);
        this.saveNewInfoAPI(info);
      }
    }
 render() {

        return (
            <div }>

                <Container fluid >

                    <Row >
                        <Col  >

                            <AvForm id = "avForm" onValidSubmit = {this.handleValidSubmit} onInvalidSubmit=}>
                               <Label >Info</Label>
                               <AvField onChange = {this.onChange} name = "email" placeholder = ""Email/>
                              ........
                              .......
                            </AvForm>

                      </Col>

                    </Row>

                </Container>
            </div>
       );
    }

}

Я попытался минимизировать компоненты, потому что они слишком велики, надеюсь, достаточно ясно, что я пытаюсь сделать. Может ли кто-нибудь помочь мне с решением/идеей? Я попытался использовать Google, но не нашел ничего полезного.

Большое спасибо