NextJS template

import { Box } from '@mui/system'; import Head from 'next/head'; import { useState } from 'react'; import FilterSort from '../../components/filter-sort/FilterSort'; import LoadingSpinner from '../../components/loader/basic-spinner/LoadSpinner'; import ProductsGrid from '../../components/products-grid/ProductsGrid'; import ProductsHero from '../../components/products-hero/ProductsHero'; import { useInfiniteProducts } from '../../hooks/useInfiniteQuery'; const Products = () => { const [filter, setFilter] = useState(''); const [sort, setSort] = useState(''); const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteProducts( filter, sort ); const handleProductTypeChange = (event) => { const filterText = event.target.value; setFilter(filterText); }; const handleSortChange = (event) => { const sort = event.target.value; setSort(sort); }; return ( NextJS template {isLoading ? ( ) : ( )} ); }; export default Products;