Detect and fix bugs in a React component

Find and fix the errors in the following React component.

import React, { useEffect, useState } from "react";
import "./index.css";
import PostComponent from "./Post";

// Refactor | Explain | Generate JSDoc
export default function App() {
    const posts_list = [
    {
    id: "1",
    name: "siberia can code ㈠",
    imggesrc: "https://avatars.githubusercontent.com/u/45297354?v=4",
    text: "first post",
    },
    {
    id: "2",
    name: "theo",
    imggesrc: "https://avatars.githubusercontent.com/u/6751787?v=4",
    text: "second post",
    },
    {
    id: "3",
    name: "dan abramov",
    imggesrc: "https://avatars.githubusercontent.com/u/810438?v=4",
    text: "third post",
    }];

const [selectedId, setPostId] = React.useState(0);
const [Post, setSelectedPost] = React.useState(posts_list[0]);
console.log("@", selectedId);

useEffect(() => {
    setSelectedPost(posts_list[selectedId]);
}, [selectedId]);

return (
    <div className="App">
        <div>selected user:</div>
        <div className="user">
            <img
                className={"avatar"}
                src={Post.imggesrc}
                style={{ width: "30px" }}
            />
            {Post.name}
        </div>
        <br />
        <br />
        <br />
        <div>posts_list</div>
        {posts_list.length
            ? posts_list.map((el, index) => (
                <PostComponent key={index} data={el} onClick={() => setPostId(index)} />
            ))
            : null
        }
    </div>
);