我正在尝试将文本区域的值从reactjs中的某个组件传递到另一个react组件中使用。组件值存储在useState钩子中的第一个组件中，因此我希望在另一个组件中访问它并围绕它运行map()函数。这在React中是可能的吗？我不想把所有内容都放在app.js中，因为这只是我不想要的纯HTML。我想改用reactjs函数组件？

第一个组件：

import React, { useState, useRef, useEffect } from "react";

function Firstcomp() {
  const [quotes, setQuotes] = useState(["hi there", "greetings"]);
  const reference = useRef();

  function sub(event) {
    event.preventDefault();
    setQuotes((old) => [reference.current.value, ...old]);
    console.log(quotes);

    return;
  }

  return (
    <>
      <div>
        <div>
          <div>
            <h4>jon snow</h4>
          </div>

          <form onSubmit={sub}>
            <textarea
              type="textarea"
              ref={reference}
              placeholder="Type your tweet..."
            />
            <button type="submit">Tweet</button>
          </form>
          {quotes.map((item) => (
            <li key={item}>{item}</li>
          ))}
          {/* we can use card display taking item as prop where it 
            will do the job of filling the <p> in card entry */}
        </div>
      </div>
    </>
  );
}
export default Firstcomp;

第二组件

import React from "react";

function SecondComp(props) {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
}
export default Secondcomp;