React Javascript: Rendering user data on screen and inserting data into function

I am building a letter interval application. Basically, I want users to be able to type in letters within an input element, and have that data be used in a function that ive built and then have that data rendered in an intervel. I have the user data rendering on the screen in a H1 tag no problem, whoever, I am having trouble inserting the user data into the interval function which ultimately renders interval letters on the screen. Any help will be greatly appreciated!!

This is the code:

import React, { useState } from "react";
import Chalkboard from "../chalkboard/chalkboard";
import StartStop from "../startStopButtons/startStopButtons";

function IntervalFunction() {
  var _timer;
  var vowels = "aeiouy".split("");

  // Function that starts the letter interval
  const startFunction = () => {
    var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
    getRandom(allLetters);
  };

  // Stops startFunction
  const stopButton = () => {
    clearTimeout(_timer);
    clearTimeout(getRandom);
  };

  // letter interval function
  function getRandom(letters) {
    var randomSet = letters[Math.floor(Math.random() * letters.length)];
    console.log("set random", randomSet);
    document.getElementById("demo3").innerHTML = randomSet;
    _timer = setTimeout(() => getRandom(letters), 1000);
  }

  
  //state function that renders user input on screen
  const [data, setData] = useState(null);
  function getData(e) {
    setData(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }
  //function that grabs user input and insert into function
  const inputValue = () => {
    var userSet = { getData };
    getRandom(userSet);
  };

  return (
    <div>
      <h1>Letter Interval Application</h1>

      <Chalkboard />

      <h1>Your custom letter set:</h1>
      <h1>{data}</h1>
      <form onSubmit={handleSubmit}>
        <input onChange={getData} className="inputField" type="text" placeholder="Enter letters here, separate by commas" />
        <button onClick={startFunction} onClick={inputValue} value="Start">
          Start
        </button>
      </form>

      <StartStop clickStop={stopButton} />

    </div>
  );
}

export default IntervalFunction;

Thanks so much for reading.