Make one variable show up in a different component using TS and React

Evening, I am using react with Typescript.

My question is, why cant I simply read a variable when trying to use it in another component? I have 2 components here, 1. Learned.tsx and 2. SubmitData.tsx.
My goal is to display the variable bodyContent from SubmitData.tsx (line 13) in the paragraph element of Learned.tsx. Learned.tsx is the Parentcomponent and SubmitData.tsx is the Childcomponent
Here is the code:
Learned.tsx:

import SubmitData from "./SubmitData/SubmitData";
import "./Learned.css";

function Learned(props: any) {
  let bodyContent = props.bodyContent;

  return (
    <div className="containerLearned">
      <div className="containerLeft">
        <SubmitData setBodyContent={props.setBodyContent} />
      </div>
      <div className="containerRight">
        <p>{bodyContent}</p>
      </div>
    </div>
  );
}

export default Learned;

SubmitData.tsx:

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

function SubmitData(props: any) {
  const [body, setBody] = useState({ value: "" });
  const [header, setHeader] = useState({ value: "" });
  // const [body, setBody] = useState("");
  const clickHandle = (event: any) => {
    event.preventDefault();
    console.log("You clicked the button");
  };

  let bodyContent = body.value;

  return (
    <div className="create">
      <form>
        <input
          type="text"
          required
          value={header.value}
          onChange={(e) => setHeader({ value: e.target.value })}
        ></input>
        <textarea
          required
          value={body.value}
          onChange={(e) => setBody({ value: e.target.value })}
        ></textarea>
        <button onClick={clickHandle}>Submit</button>
      </form>
    </div>
  );
}

export default SubmitData;