ReactJS Can't get value of something because not rendered yet, but the function where i get value is called in the rendering

Question

in my React app, I am making a contact form. At the moment I am trying to make it actually send an email, but the thing is that the function where i get the values of an input form (and then send the values in an email), needs to be made before the render of the input form, because the function is called in the render of the input form (in the onSubmit part). But because the elements aren't rendered yet, i can't get the values of them. So unless i made a dumb mistake or something, I'm in some sort of loop.

My code:

import logo from './logo.svg';
import './App.css';
import ContactForm from './contactForm.js'
import React from 'react';
import emailjs from '@emailjs/browser';

function sendEmail() {
  const nameValue = document.getElementById('nameInputId').value;
  const emailValue = document.getElementById('emailInputId').value;
  const subjectValue = document.getElementById('subjectInputId').value;
  const messageValue = document.getElementById('messageInputId').value; 
  const templateParams = {
    from_name: nameValue,
    from_email: emailValue,
    subject: subjectValue,
    message: messageValue
  }
  emailjs.send('service_vaofx8t', 'template_vh7z7yf', templateParams, '8r5pAEVrvJN47utJv');
}

class App extends React.Component {
  render() {
    return (
      <ContactForm submit={sendEmail()} />
    );
  }
};



export default App;