Один State в модальном окне, как пофиксить

При нажатие на любой из постов, вылезает модальное окно, в котором отображаться свой текст. Но при вызове окна(любого поста) отображается один и тот же текст, хотя в консоли все отображается правильно. Как исправить?(На картинке вызывается( sunt ...)).Вызов первого поста( sunt ...)

import React, { useState }  from 'react'
import Modal from './Modal'


const Posts = ({post}) =>{
    const [modalActive, setModalActive] = useState (true)
    const [value, setValue] = useState('')
    const filteredPost = post.filter(post => {
        return post.title.toLowerCase().includes(value.toLowerCase())
        })

    return (
        <div>
            { 
               post.map((post, i) =>(
                    <div className="col-xs-12" >  
                        <div className="hgroup" value={post.id} >   
                            <h4 className="open-btn" onClick={() => setModalActive(true)}>{post.title}</h4>
                        </div>
                        <Modal active={modalActive} setActive={setModalActive}>
                            <h1>Пост {post.id}</h1>
                            <h4>{post.body}</h4>
                        </Modal>
                        </div>
                ))}

            <div className="form">
                <form className="serch__form">
                    <input  type="text"
                            id="input"
                            placeholder="Search..."
                            lassName="serch__input"
                            onChange={(e) => setValue(e.target.value)}/>
                </form>

            </div>
        </div>
    )}




export default Posts



import React, { useState } from 'react'
import Posts from './Posts'
import './modal.css'

const Modal = ({active, setActive, children}) => {

    const [post] = useState([])

    return (
        <div className={active ? 'modal active' : 'modal'} onClick = {() => setActive(false)}>
            <div className={active ? 'modal__content active' : 'modal__content'} >
                {children}
            </div>
        </div>
        )}

export default Modal;

Ответы (0 шт):