اشتقاق نتائج البحث من الحالة

import { useState } from "react";
const skills = ["HTML", "CSS", "React"];
export default function App() {
  const [query, setQuery] = useState("");
  const visible = skills.filter(skill => skill.toLowerCase().includes(query.toLowerCase()));
  return <><label>Search <input value={query} onChange={event => setQuery(event.target.value)} /></label><ul>{visible.map(skill => <li key={skill}>{skill}</li>)}</ul></>;
}