React Js Table with Search bar

<!DOCTYPE html>
<html>

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

function App() {
            const [searchTerm, setSearchTerm] = useState('');

const data = [
                { id: 1, name: 'John', age: 25, email: 'john@example.com' },
                { id: 2, name: 'Jane', age: 30, email: 'jane@example.com' },
                { id: 3, name: 'Bob', age: 35, email: 'bob@example.com' },
                { id: 4, name: 'Alice', age: 28, email: 'alice@example.com' },
                { id: 5, name: 'Tom', age: 32, email: 'tom@example.com' },
                { id: 6, name: 'Emily', age: 29, email: 'emily@example.com' },
                { id: 7, name: 'David', age: 31, email: 'david@example.com' },
                { id: 8, name: 'Sarah', age: 27, email: 'sarah@example.com' },
                { id: 9, name: 'Michael', age: 33, email: 'michael@example.com' },
                { id: 10, name: 'Olivia', age: 26, email: 'olivia@example.com' },
                { id: 11, name: 'Jacob', age: 34, email: 'jacob@example.com' },
                { id: 12, name: 'Sophia', age: 28, email: 'sophia@example.com' },
                { id: 13, name: 'Matthew', age: 30, email: 'matthew@example.com' },
                { id: 14, name: 'Emma', age: 32, email: 'emma@example.com' },
                { id: 15, name: 'Daniel', age: 29, email: 'daniel@example.com' },
            ];

const filteredData = data.filter(item =>
                item.name.toLowerCase().includes(searchTerm.toLowerCase())
            );

return (
                <div className='container'>
                    <h3>React Js Table With Search bar</h3>
                    <input
                        type="text"
                        placeholder="Search"
                        value={searchTerm}
                        onChange={event => setSearchTerm(event.target.value)}
                    />
                    {filteredData.length > 0 ? (
                        <table>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Age</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredData.map(item => (
                                    <tr key={item.id}>
                                        <td>{item.name}</td>
                                        <td>{item.age}</td>
                                        <td>{item.email}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    ) : (
                        <p>No data found</p>
                    )}
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        * {
            box-sizing: border-box;
        }

.container {
            margin: 0 auto;
            width: 600px;
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }

input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }

table {
            width: 100%;
            border-collapse: collapse;
        }

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

thead {
            background-color: #f9f9f9;
        }

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

p {
            font-size: 16px;
            color: #777;
        }
    </style>
</body>

</html>