React.js– storing input data into varible

I am trying to put input data into a variable from within a component, and I want to use that variable to pass it through a function within my main.js file. The function puts random letter into an interval, I already have it working with a button, but I would like users to be able to input their own letters. I already have the input data being rendered on the page using state, however, I do not know how to convert that data into a variable and use it on another page. Thanks for the help everyone!

This is my input component:

import "./Input.css";
import React, { useState } from "react";

function Input(props) {
  const [data, setData] = useState(null);
  function getData(e) {
    setData(e.target.value);
  }
  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div>
      <h1>Your custom letter set: {data} </h1>
      <form onSubmit={handleSubmit}>
        <input onChange={getData} className="inputField" type="text" placeholder="Enter letters here, separate by commas" />
        <button onClick={props.click4} value="Start">
          Start
        </button>
      </form>
    </div>
  );
}

export default Input;

This is my main JS file:

import React, { useState } from "react";
import "./App.css";
import Chalkboard from "./chalkboard/chalkboard";
import StartStop from "./startStopButtons/startStopButtons";
import LevelBoxes from "./levelBoxes/levelBoxes";
import Input from "./Inputs/Input";

function App() {
  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);
  };

  // function that sets certain letters into interval 

  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);
  }

 //Here I would like to use the Var to insert into function like so

const inputData = () => {
    var inputDataInput;
    getRandom(inputDataInput);
  };

  }

  return (
    <div className="App">
      <h1>Letter Interval Application</h1>

      <Chalkboard click={myFunction} />

      <Input clickStart={startFunction} click4={inputData} />
 
      <LevelBoxes clickStart={startFunction} />

      <StartStop clickStop={stopButton} />

    </div>
  );
}

export default App;