Adding a Component dynamically

I created two React Components, one it's called Emailer and it sends an email the moment it's added to the DOM, the other one it's called From, and it renders a form using 'hook-form' api. After the user clicks Submit, the function so called 'onSubmit' gives me the information passed on the form. My goal is to use Emailer inside the 'onSubmit' function so that I can automatically send data in the email.

import React, {Component} from 'react';

class Emailer extends Component {
  constructor(props) {
    super(props);
    this.sendMail = this.sendMail.bind(this);
  }


  sendMail() {
         window.Email.send({
                 SecureToken : "83788b8c-03d1-41cb-88aa-4a21cd24ee2b",
                 To : 'othmanjobsblog@gmail.com',
                 From : "othmanjobsblog@gmail.com",
                 Subject : "Personal Profil",
                 Body : "poooop"
               }).then(
                 message => alert(message)
               );

    }

  render() {
    return (
      <div>{this.sendMail()}</div>
    );
  }
}

export default Emailer;

import React from 'react';
import useForm from 'react-hook-form';
import Emailer from '../contactMe/Emailer';


export default function Form() {

  const { register, handleSubmit, errors } = useForm(); // initialise the hook


  const onSubmit = data => {
    console.log(data);
  }; // callback when validation pass



  return (

    <form onSubmit={handleSubmit(onSubmit)} className="form">

        <div className="outerContainer">
          <div className="innerContainer">
            <div className="firstnameContainer">
              <div className="inputTitle">Firstname</div>
              <input type="text" name="firstname" placeholder="Annette" ref={register({required: true, pattern: /^[A-Za-z]+$/i})} />
              <div className="errorMessage">{errors.firstname && 'Firstname is required (no white space)'}</div>
            </div>

            <div className="lastnameContainer">
              <div className="inputTitle">Lastname</div>
              <input type="text" name="lastname" placeholder="Cooper" ref={register({required: true, pattern: /^[A-Za-z]+$/i})} />
              <div className="errorMessage">{errors.lastname && 'Lastname is required (no white space)'}</div>
            </div>

            <div className="emailContainer">
              <div className="inputTitle">E-mail</div>
              <input type="email" name="email" placeholder="annette.cooper@example.com" ref={register({required: true, pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i})} />
              <div className="errorMessage">{errors.email && 'Valide e-mail is required'}</div>
            </div>
          </div>

          <div className="messageContainer">
            <div className="inputTitle">Message</div>
            <textarea name="message" ref={register({required: true, min: 150})} />
            <div className="errorMessage">{errors.message && 'Message is required'}</div>
          </div>
        </div>

        <div className="submitContainer">
          <input className="button element color-11" type="submit" />
          <div className="emailer"></div>
        </div>

    </form>
  );
}

```**strong text**