React Js Filter by Checkbox

<!DOCTYPE html>
<html>

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

function App() {
      const data = [
        { id: 1, title: 'The Shawshank Redemption', category: 'Movie' },
        { id: 2, title: 'Bohemian Rhapsody', category: 'Song' },
        { id: 3, title: 'Inception', category: 'Movie' },
        { id: 4, title: 'Stranger Things', category: 'Webseries' },
        { id: 5, title: 'The Godfather', category: 'Movie' },
        { id: 6, title: 'Imagine', category: 'Song' },
        { id: 7, title: 'Breaking Bad', category: 'TV Series' },
        { id: 8, title: 'The Dark Knight', category: 'Movie' },
        { id: 9, title: 'Hotel California', category: 'Song' },
        { id: 10, title: 'Friends', category: 'TV Series' },
        { id: 11, title: 'Pulp Fiction', category: 'Movie' },
        { id: 12, title: 'Bohemian Rhapsody', category: 'Song' },
        { id: 13, title: 'Game of Thrones', category: 'TV Series' },
        { id: 14, title: 'The Matrix', category: 'Movie' },
        { id: 15, title: 'Yesterday', category: 'Song' },
        { id: 16, title: 'Breaking Bad', category: 'TV Series' },
        { id: 17, title: 'Forrest Gump', category: 'Movie' },
        { id: 18, title: 'Purple Haze', category: 'Song' },
        { id: 19, title: 'The Crown', category: 'TV Series' },
        { id: 20, title: 'The Lord of the Rings', category: 'Movie' }
      ];

const [selectedOptions, setSelectedOptions] = useState([]);

return (
        <div className='container'>
          <h3 className='title'>React Checkbox Filter Example</h3>
          <div className='checkbox-group'>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Movie"
                checked={selectedOptions.includes('Movie')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Movie
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Song"
                checked={selectedOptions.includes('Song')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Song
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="TV Series"
                checked={selectedOptions.includes('TV Series')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              TV Series
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Webseries"
                checked={selectedOptions.includes('Webseries')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Webseries
            </label>
          </div>
          <ul>
            {filteredData.map((item) => (
              <li key={item.id} className='list-item'>
                {item.id} {item.title}
              </li>
            ))}
          </ul>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

.checkbox-group {
      display: flex;
    }

.title {
      font-size: 24px;
      margin-bottom: 20px;
    }

.checkbox-label {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
    }

.checkbox-input {
      margin-right: 10px;
    }

ul {
      list-style: none;
      padding: 0;
    }

.list-item {
      margin: 5px 0;
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
    }
  </style>
</body>

</html>