Как передать useState из дочернего компонента в родительский React

У меня есть код в файле index.js

import ReactDOM from "react-dom/client";
import "./styles.css";
import Input from "./UI/RadioInputs.jsx";

function App() {
  return (
    <div>
      <Input />
      <h1 className={textColor}>Hello CodeSandbox</h1>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

И код в файле RadioInputs.jsx

import { useState } from "react";
import "../styles.css";

const Input = () => {
  const [textColor, setTextColor] = useState("text");
  return (
    <div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text")}
          id="setAutoTextColor"
        />
        <label htmlFor="setAutoTextColor">Auto</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text red")}
          id="setRedTextColor"
        />
        <label htmlFor="setRedTextColor">Red</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text green")}
          id="setGreenTextColor"
        />
        <label htmlFor="setGreenTextColor">Green</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text blue")}
          id="setBlueTextColor"
        />
        <label htmlFor="setBlueTextColor">Blue</label>
      </div>
    </div>
  );
};

export default Input;

Проблема заключается в том, что компонент не видит textColor. Уже по всем просторам интернета переискал всё, но ничего конкретного не нашёл. Находил информацию про то, что можно передавать состояния из дочернего копонента в родительский, но там был пример с event и onChange, а в моём случае это не подхо Я новичок в React, поэтому извините за тупость. Я понимаю, что ошибка очень глупая, но я пока не знаю на неё ответ...