Props not getting value from another component

I am new to React and have just been learning about functional components. I am trying to build a Login page that redirects to a Comment section which when submitted, displays the comment text to the Result page. I am trying to pass the comment from Comment component to Result through props but I can’t seem to get it to work. Any thoughts on my code below? Thanks!

Comment.js

import React, { useState, useEffect } from "react";
import auth from "../../auth/auth";
import "./Comment.css";
import { Button, Form, ToggleButtonGroup, ToggleButton } from "react-bootstrap";
import Header from "../Header/Header";

import "bootstrap/dist/css/bootstrap.css";

export default function Comment(props) {
  const [comment, setComment] = useState();
  const [email, setEmail] = useState();

  useEffect(() => {
    // get email address input using getToken()
    const loggedInUser = auth.getToken();

    if (loggedInUser !== "") {
      setEmail(loggedInUser);
    }
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    props.history.push("/result");
  };

  return (
    <div className="comment-wrapper">
      <Header />
      <Form onSubmit={handleSubmit}>
        <div class="row">
          <h3>Course Evaluation</h3>
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Was this a required course or an elective?</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-1">
            <ToggleButtonGroup type="checkbox">
              <ToggleButton value={"required"}>Required</ToggleButton>
              <ToggleButton value={"elective"}>Elective</ToggleButton>
            </ToggleButtonGroup>
          </div>
        </div>

        <div class="row">
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Course Code:</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-4">
            <Form.Control type="text" />
          </div>
        </div>

        <div class="row">
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Course Name:</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-4">
            <Form.Control type="text" />
          </div>
        </div>

        <div class="row">
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Professor Name:</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-4">
            <Form.Control type="text" />
          </div>
        </div>

        <div class="row">
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Email:</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-4">
            <Form.Control type="text" defaultValue={email} disabled={true} />
          </div>
        </div>

        <div class="row">
          <div class="col col-xs-2 col-md-4">
            <Form.Label>Your comments:</Form.Label>
          </div>
          <div class="col col-xs-2 col-md-4">
            <Form.Control
              as="textarea"
              onChange={(e) => setComment(e.target.value)}
              rows={4}
            />
          </div>
        </div>
        <br></br>
        <Button variant="success" type="submit">
          Submit
        </Button>
      </Form>
      <br></br>
    </div>
  );
}

Result.js

import React, { useState, useEffect } from "react";
import auth from "../../auth/auth";
import Comment from "../Comment/Comment";
import { Form } from "react-bootstrap";
import Header from "../Header/Header";

import "bootstrap/dist/css/bootstrap.css";

export default function Result(props) {
  const [comment, setComment] = useState();
  const [email, setEmail] = useState();

  useEffect(() => {
    // get email address input using getToken()
    const loggedInUser = auth.getToken();

    if (loggedInUser !== "") {
      setEmail(loggedInUser);
    }
  }, []);

  return (
    <div className="result-wrapper">
      <Header />
      <Form>
        <div class="row">
          <div class="col col-xs-2 col-md-12">
            <h3>Thank You {email}</h3>
          </div>
        </div>
        <div class="row">
          <div class="col col-xs-2 col-md-12">
            <p>We appreciate your comments: {props.Comment}</p>
          </div>
        </div>
      </Form>
    </div>
  );
}

App.js

import React from "react";
import "./App.css";
import Login from "./components/Login/Login";
import Comment from "./components/Comment/Comment";
import Result from "./components/Result/Result";
import auth from "./auth/auth";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route
            path="/comment"
            render={(data) =>
              auth.getLogInStatus() ? (
                <Comment {...data}></Comment>
              ) : (
                <Redirect to={{ pathname: "/" }}></Redirect>
              )
            }
          ></Route>

          <Route
            path="/result"
            render={(data) =>
              auth.getLogInStatus() ? (
                <Result {...data}></Result>
              ) : (
                <Redirect to={{ pathname: "/" }}></Redirect>
              )
            }
          ></Route>

          <Route exact path="/" component={Login}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;