How to call a function from outside a class in React?

Question

I'm trying to create a button to upload files. I have used a custom toolbar. My problem is I want to call a function from outside the class. The function which I need to call is declared inside the class. Is there a way to do this? (The ActionButton which I have used here is a reusable component).insertFile is the function and I want call onFileChange inside that insertFile function.

AddTicket.js
import React, { useEffect, useState } from "react";
import { Row, Col } from "reactstrap";
import { Form, FormGroup, Input } from "reactstrap";
import ActionButton from "./../../components/ButtonComponent";
import * as Icon from "react-bootstrap-icons";
import axios from "axios";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";

const CustomAttachment = () => (
  <span>
    <Icon.Paperclip />
  </span>
);

const CustomList = () => (
  <span>
    <Icon.ListUl />
  </span>
);

const CustomLink = () => (
  <span>
    <Icon.Link />
  </span>
);

function insertFile() {
  console.log("File Icon");
  // this.onFileChange();
}

const CustomToolbar = () => (
  <div id="toolbar">
    <button className="ql-file">
      <CustomAttachment />
    </button>
  </div>
);

class AddTicket extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorHtml: "",
      selectedFile: null,
    };
  }


  onFileChange = (event) => {
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
  };

  onFileUpload = () => {
    // Create an object of formData
    const formData = new FormData();

    // Update the formData object
    formData.append(
      "myFile",
      this.state.selectedFile
      // this.state.selectedFile.name
    );

    // Details of the uploaded file
    console.log(this.state.selectedFile);

    // Request made to the backend api
    // Send formData object
    axios.post("api/uploadfile", formData);
  };

  static modules = {
    toolbar: {
      container: "#toolbar",

      handlers: {
        file: insertFile,
      },
    },
  };

  static formats = [
    "header",
    "font",
    "size",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "color",
  ];

  render() {
    return (
      <div className="popup-box">
        <div className="box">
          {/* <span className="close-icon" onClick={props.handleClose}>
            x
          </span> */}
          <Form
            onSubmit={this.handleSubmit}
            style={{ paddingLeft: 30, paddingTop: 50 }}
          >
            <Row style={{ paddingBottom: 50 }}>
              <Col sm={11} xs={11} md={11}>
                <h1>Add new ticket </h1>
              </Col>
              <Col onClick={this.props.handleClose} m={1} xs={1} md={1}>
                <h1 className="close-icon">X </h1>
              </Col>
            </Row>

            <FormGroup>
              <Row style={{ marginBottom: "25px" }}>
                <Col sm={2}>
                  <h4>Description</h4>
                </Col>
                <Col sm={9}>
                  <div className="editor-wrapper">
                    <div className="editor-container">
                      <div className="text-editor">
                        <CustomToolbar />
                        <ReactQuill
                          value={this.state.editorHtml}
                          onChange={this.handleChange}
                          placeholder={this.props.placeholder}
                          modules={AddTicket.modules}
                          formats={AddTicket.formats}
                        />
                        <div>Test</div>
                        <div>
                          <input type="file" onChange={this.onFileChange} />
                        </div>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </FormGroup>

            <Row>
              <Col sm={2}></Col>
              <Col>
                <ActionButton text="Send" />
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    );
  }
}

export default AddTicket;