Передать пропсы в модальное окно

я только недавно начал изучать React и столкнулся с проблемой: как передать пропсы по клику в модальное окно. Погуглил, и индус в видео подсказал, что нужно делать запрос на сервер, получать id. Сделал как показано в примере, пишет, что id undefined. Но так же не могу перекинуть нормально пропсы, ибо у Индуса всё лежит без компонентов. Вот App с 3-мя компонентами: Header, Content и Footer.

function App() {

  const [posts, setPosts] = React.useState([]);

  const [isLoading, setIsLoading] = React.useState(true);

  const [showArticle, setShowArticle] = React.useState(false);

  const [modalData, setModalData] = React.useState( {id: "", title: "", body: ""})


  React.useEffect (() => {
    try {
      axios.get("https://jsonplaceholder.typicode.com/posts?userId=1").then((res) => {
        setPosts(res.data)
      }).finally(() =>setIsLoading(false))
    } catch (error) {
      alert("Не удалось загрузить статьи")
    }
   
  }, []) 

  const seeMore = async (id) => {
    console.log(id)
    try {
      fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(resposne=> resposne.json())
      .then(res=>setModalData(res))
    
    } catch (error) {
      alert("Ошибка")
    }
    
  }
 
  return (
    <div className="wrapper">
     <Header/>
     
     <Content
     isLoading={isLoading}
     posts={posts}
     setShowArticle={setShowArticle}
     showArticle={showArticle}
     seeMore={seeMore}
     modalData={modalData}
     />
    
     <Footer/>
     
    </div>
  );
}

Вот собственно и сам Компонент Content, где происходит рендер Article и открывается модальное окно.

const Content = ({
  posts, 
  isLoading, 
  setShowArticle, 
  showArticle,
  seeMore,}) => {
  
    return (
    <div className="content">
      <h1>Articles</h1>
      <ul className="articleList">
        {isLoading ? (
          <div>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
            <Skeleton/>
          </div>
        ) : (
          <>
            {posts.map((item) =>
              <Article
                key={item.id}
                title={item.title}
                body={item.body}
                openModal={() => setShowArticle(true)}
                onClickBtn={(id) => seeMore(id)}
              />
            )}
          </>
        ) }
        
      </ul>
      {showArticle ? <Modal  onClose={() => setShowArticle(false)} /> : null}
  </div>
  )
}

Компонент Article

const Article = ({id, title, body, openModal, onClickBtn}) => {
  
  const obj = {id, title, body}

  const onClickSeeMore = () => {
    console.log(onClickSeeMore )
    onClickBtn(obj)
    
  }

 

  return (

    <li key={id} className="article">
      <div className="articleInner">
        <h2 className="title">{title}</h2>
        <p className="description">{body}</p>
      </div>
      <button onClick={onClickSeeMore} className='articleBtn'>See More</button>
  </li>
  )
}

компонент Modal

const Modal = ({onClose, modalData}) => {

  return (

    <div className="Modal">
        <div className="modalDialog">
           <div className="modalContent">
               <div key={modalData.id} className='modalTop'>
                  <h2>Article</h2>
                  <img width={20}  heigh={20} onClick={onClose} src="../../public/img/remove-btn.svg" alt="Close" />
               </div>
               <div className="articleInner">
                  <h2 className="title">{modalData.title}</h2>
                  <p className="description">{modalData.body}</p>
               </div>
               
           </div>
        </div>
     </div>
     
  )
}