add return null when fetch failed

src/app/ui/search/search-stats.tsx

@@ -1,21 +1,9 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query';
-import { getSearchStats } from '@/app/actions/searchActions';
-import { useEffect } from 'react';
+import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';
 
 export function SearchStats() {
-	const {
-		data: userSearchData,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userSearchData'],
-		queryFn: () => {
-			return getSearchStats();
-		},
-	});
+	const { data: userSearchData, isLoading, isError, error, } = useUserSearchData()
 
 	return (
 		<div className="stats-search">
@@ -40,7 +28,7 @@ export function SearchStats() {
 			<div className="stat-item">
 				<span className="stat-label">Аудио</span>
 				<span className="stat-value">
-					{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0}
+					{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0}
 				</span>
 			</div>