change to react query

    "@mui/x-data-grid": "6.0.3",

    "@popperjs/core": "2.11.7",

    "@reduxjs/toolkit": "1.9.5",

    "@tanstack/react-query": "^5.8.9",

    "aes-js": "^3.1.2",

    "apexcharts-clevision": "3.28.5",

    "axios": "1.4.0",

                sx={{

                  pt: 0,

                  transition: 'padding .25s ease',

                  '& > :first-child': { mt: '0' },

                  '& > :first-of-type': { mt: '0' },

                  pr: !navCollapsed || (navCollapsed && navHover) ? 4.5 : 1.25

                }}

              >

            borderBottomRightRadius: 0

          }),

          '& + .MuiCollapse-root': {

            '& .MuiAccordionDetails-root:first-child': {

            '& .MuiAccordionDetails-root:first-of-type': {

              paddingTop: 0

            }

          }

    MuiTableRow: {

      styleOverrides: {

        root: ({ theme }) => ({

          '& .MuiTableCell-head:not(.MuiTableCell-paddingCheckbox):first-child, & .MuiTableCell-root:not(.MuiTableCell-paddingCheckbox):first-child ':

          '& .MuiTableCell-head:not(.MuiTableCell-paddingCheckbox):first-of-type, & .MuiTableCell-root:not(.MuiTableCell-paddingCheckbox):first-of-type ':

            {

              paddingLeft: theme.spacing(5)

            },

// // tanStankQuery is a library for manage asyncronous states

// import { useQuery } from '@tanstack/react-query'

// function Peticiones() {

//     const {isLoading, isError, data: users = [] } = useQuery(

//         ['id'], // <-- key de la información o de la query

//         async () => await fetchUsers(1) // <-- como traer la información

//     )

// }

// export default Peticiones

// // crearás una función que utiliza React Query para realizar la consulta.

// export const useApiQuery = (key, fetchDataFunction) => {

//     return useQuery(key, fetchDataFunction);

//   };

// // EN MIS OTROS COMPONENTES

// // ExampleComponent.js

// import { useApiQuery } from './api';

// const ExampleComponent = () => { // define un componente llamado Example Component que utiliza la función useApiQuery

//   const { data, isLoading, error } = useApiQuery('exampleQueryKey', fetchDataFunction); //exapleQueryKey es el key de la información que se va a traer y fetchDataFunction es la función que se va a utilizar para traer la información

//   if (isLoading) return 'Cargando...';

//   if (error) return 'Error al cargar datos';

//   return (

//     <div>

//       {data.map(item => (

//         <div key={item.id}>{item.name}</div>

//       ))}

//     </div>

//   );

// };

// // ESTA OTRA POSIBILIDAD PUEDE ESTAR MEJOR

// function Example() {

//     const { isPending, error, data } = useQuery({

//       queryKey: ['repoData'],

//       queryFn: () =>

//         fetch('https://api.github.com/repos/TanStack/query').then(

//           (res) => res.json(),

//         ),

//     })

//     if (isPending) return 'Loading...'

//     if (error) return 'An error has occurred: ' + error.message

//     return (

//       <div>

//         <h1>{data.name}</h1>

//         <p>{data.description}</p>

//         <strong>👀 {data.subscribers_count}</strong>{' '}

//         <strong>✨ {data.stargazers_count}</strong>{' '}

//         <strong>🍴 {data.forks_count}</strong>

//       </div>

//     )

//   }

// // api.js

// import { useQuery } from 'react-query';

// import axios from 'axios';

// const fetchDataFunction = async () => {

//   const response = await axios.get('https://api.example.com/data'); // Cambia la URL según tu API

//   return response.data;

// };

// export const useApiQuery = (key, options = {}) => {

//     return useQuery(key, fetchDataFunction, options);

// };