Usé pestañas y cada pestaña tiene una URL diferente para ser golpeada, así que creé un componente diferente y pasé el valor como accesorios y en la consulta de reacción lo usé como claves de consulta pero no funciona, ayúdame a depurar este código como estoy. muy nuevo para reaccionar-consulta y la solicitud http también es nueva para mí.

 <div className='card-body py-3'> <ul className='nav nav-tabs nav-line-tabs mb-5 fs-6'> <li className='nav-item'> <a className='nav-link active' data-bs-toggle='tab' href='#kt_tab_pane_1'> Pending </a> </li> <li className='nav-item'> <a className='nav-link' data-bs-toggle='tab' href='#kt_tab_pane_2'> Verified </a> <li className='nav-item'> <a className='nav-link' data-bs-toggle='tab' href='#kt_tab_pane_3'> Update_rejected </a> </li> </ul> <div className='tab-content' id='myTabContent'> <div className='tab-pane fade active show' id='kt_tab_pane_1' role='tabpanel'> <TravelItem name='pending' /> </div> <div className='tab-pane fade' id='kt_tab_pane_6' role='tabpanel'> <TravelItem name='Update_rejected' /> </div> </div> </div> in Travel item Component I used the query key which passes my name in query Params to the function on api request const {data, isLoading, isError, isSuccess, isFetching} = useQuery( ['Pending', name], travelVerified, { refetchOnMount: true, } ) This is my api request where I used dynamic key every time I fetch the data with different name export const travelVerified = async ({queryKey}: any) => { const [_key, name] = queryKey const {data} = await axios.get(`${process.env.REACT_APP_API_URL}/${name}`) return data }