Tengo un menú de selección (con tres opciones) junto con una barra de búsqueda. Todo lo que quiero es guardar la opción seleccionada y el término buscado y enviarlos al back-end. Aquí está mi código:

 import React, { useState, useEffect } from 'react' const Table = () => { const navigate = useNavigate() const [users, setUsers] = useState([]); const [currentUsers, setCurrentUsers] = useState([]); const [search, setSearch] = useState(''); const [column, setColumn] = useState(''); //for saving the selected option useEffect(async () => { try { const response = await getUsers(search); setUsers(response.data.users); } catch (error) { } }, [search]); return ( <input type='text' placeholder='search..' onChange={(e) => setSearch(e.target.value)} value={search} /> <select aria-label=".form-select-sm example"> <option selected value="1">all</option> <option value="2">name</option> <option value="3">phone</option> </select> <table className='w-full border-separate rounded-md'> <thead> <tr className='bg-text-secondary text-white shadow-sm text-center'> <th className='p-2'>name</th> <th className='p-2'>phone</th> </tr> </thead> <tbody> {currentUsers.map((item, index) => <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}> <td className='text-text text-sm p-2'>{item.name}</td> <td className='text-text text-sm p-2'>{item.phone}</td> </tr> )} </tbody> </table> ) }

He tenido éxito al recibir el término de búsqueda en el back-end, pero no sé cómo aplicarlo también en la opción seleccionada. Intenté agregar onClick() y onChange() en cada opción y guardar el estado, pero no tuve éxito. ¿Cómo puedo hacer esto?