React Js Display/Show JSON array in table

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

function App() {
            const [partyData, setPartyData] = useState([
                {
                    "id": 1,
                    "name": "John Smith",
                    "party": "Democratic Party"
                },
                {
                    "id": 2,
                    "name": "Sarah Johnson",
                    "party": "Republican Party"
                },
                {
                    "id": 3,
                    "name": "Michael Thompson",
                    "party": "Green Party"
                },
                {
                    "id": 4,
                    "name": "Emily Davis",
                    "party": "Independent"
                },
                {
                    "id": 5,
                    "name": "Robert Martinez",
                    "party": "Libertarian Party"
                },
                {
                    "id": 6,
                    "name": "Jennifer Lee",
                    "party": "Democratic Party"
                },
                {
                    "id": 7,
                    "name": "Andrew Wilson",
                    "party": "Republican Party"
                },
                {
                    "id": 8,
                    "name": "Stephanie Adams",
                    "party": "Independent"
                },
                {
                    "id": 9,
                    "name": "David Garcia",
                    "party": "Democratic Party"
                },
                {
                    "id": 10,
                    "name": "Jessica Roberts",
                    "party": "Republican Party"
                }
            ]);

return (
                <div className='container'>
                    <h1>React JS Display JSON data as table</h1>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Party</th>
                            </tr>
                        </thead>
                        <tbody>
                            {partyData.map((item) => (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>{item.party}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

h1 {
            text-align: center;
            margin-bottom: 20px;
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

th,
        td {
            padding: 10px;
            text-align: left;
        }

th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

tr:nth-child(even) {
            background-color: #f9f9f9;
        }

tr:hover {
            background-color: #ebebeb;
        }
    </style>
</body>

</html>