How to store multiple set of data in local storage in reactjs?

I have a page called " Post.js" where I want to click the " Add Favt" button and save the data into local storage. But in every new click, the data is replaced by the previous one instead of adding new data.

Here is "Post.js":

const Posts = ({ posts, loading }) => {
    const click = (id, name, bio, link) => {
        //setButtonText(text);
        const obj = {
            id: id,
            name: name,
            bio: bio,
            link: link,
        };
        localStorage.setItem('items', JSON.stringify({ ...obj }));
    };

    if (loading) {
        return <h2>Loading...</h2>;
    }
    return (
        <div className="fav-content">
            <ul className="card">
                {posts.map((item, index) => {
                    console.log(item._id);
                    return (
                        <li key={item._id}>
                            <button
                                onClick={() => click(item._id, item.name, item.bio, item.link)}
                            >
                                Add Favt
                            </button>
                            <Card style={{ width: '18rem' }}>
                                <Card.Body>
                                    <Card.Title>Name: {item.name}</Card.Title>
                                    <Card.Text>Bio: {item.bio}</Card.Text>
                                    <Card.Text>Link: {item.link}</Card.Text>
                                </Card.Body>
                            </Card>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

And I want to fetch those saved data from local storage into "Favauth" file.

Here is "Favauth.js":

function FavAuthor() {
    const [data, setItems] = useState([]);
    useEffect(() => {
        const localStorageItems = JSON.parse(localStorage.getItem('items'));
        console.log(localStorageItems);
        if (localStorageItems) {
            setItems(localStorageItems);
        }
    }, []);
    return (
        <>
            <div className="fav-content">
                <ul className="card">
                    <li key={data.id}>
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Name: {data.name}</Card.Title>
                                <Card.Text>Bio: {data.bio}</Card.Text>
                                <Card.Text>Link: {data.link}</Card.Text>
                            </Card.Body>
                        </Card>
                    </li>
                </ul>
            </div>
        </>
    );
}