Added UserSearch component

daily-thought-frontend/src/components/form/UserSearch.tsx

 import useDebounce from "@/hooks/useDebounce";
+import { useFriends } from "@/hooks/useFriends";
 import { UserCircleIcon } from "@heroicons/react/24/outline";
 import { FC, PropsWithChildren, useEffect, useState } from "react";
 import BasicField from "./BasicField";
@@ -13,7 +14,10 @@ const UserSearch:FC<PropsWithChildren<UserSearchProps>> = ({
   const [searchQuery, setSearchQuery] = useState<string>("");
   const debouncedSearchQuery = useDebounce<string>(searchQuery, 500)
   const [searchResults, setSearchResults] = useState<any[]>([]);
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false);
+  const friends = useFriends();
+
+  console.log(friends)
 
   useEffect(() => {
     setLoading(true)
@@ -48,7 +52,7 @@ const UserSearch:FC<PropsWithChildren<UserSearchProps>> = ({
         {searchQuery && !loading && searchResults.map((result, index) => {
           if(index < limit){
             return (
-              <div className='flex items-center hover:bg-gray-100 rounded-md p-1'>
+              <div className='flex items-center hover:bg-gray-100 rounded-md p-1' key={index}>
                 <div className="">
                   <UserCircleIcon className='h-12 w-12 rounded-full text-gray-300 flex items-center justify-center' />
                 </div>