i am using the clerk provider in my app i wrapped the both the auth layout and main layout with but i am still facing the issue with the using the other classes of the clerk in my components folder components saying that

error ./node_modules\swr\dist\index.mjs
ReactServerComponentsError:

You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

,-[C:\Users\Amith\OneDrive\Desktop\backend\Threds\threds\node_modules\swr\dist\index.mjs:1:1]
1 | import { useEffect, useLayoutEffect, createContext, useContext, useState, createElement, useRef, useCallback, useDebugValue } from 'react';
: ^^^^^^
2 |
3 | /! **
3 | Copyright (c) Microsoft Corporation.
`----

Maybe one of these should be marked as a client entry with "use client":
./node_modules\swr\dist\index.mjs
./node_modules@clerk\shared\dist\esm\hooks\useOrganization.js
./node_modules@clerk\shared\dist\esm\index.js
./node_modules@clerk\clerk-react\dist\esm\errors.js
./node_modules@clerk\clerk-react\dist\esm\index.js
./components\shared\Topbar.tsx
./app(root)\layout.tsx