I am trying to build a dashboard and using the Shadcn and nextjs example.
Here is my code for the app/dashboard/positions/page.tsx

'use client';
import...

const breadcrumbItems = [
  { title: 'Dashboard', link: '/dashboard' },
  { title: 'Positions', link: '/dashboard/positions' }
];

type paramsProps = {
  searchParams: {
    [key: string]: string | string[] | undefined;
  };
};

export default function PositionsPage({ searchParams }: paramsProps) {
  const [positions, setPositions] = useState<Position[]>([]);
  const [totalPositions, setTotalPositions] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const page = Number(searchParams.page) || 1;
  const pageLimit = Number(searchParams.limit) || 10;
  const pageCount = Math.ceil(totalPositions / pageLimit);

  useEffect(() => { 
    const fetchPositions = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
        const res = await fetch(`${baseUrl}/api/positions?page=${page}&limit=${pageLimit}`);
        if (!res.ok) {
          throw new Error('Failed to fetch positions');
        }
        const data = await res.json();

        console.log('API URL:', `${baseUrl}/api/positions?page=${page}&limit=${pageLimit}`);
        console.log('API Response:', data);

        
          setPositions(data.positions);
          setTotalPositions(data.totalPositions);
        
      } catch (err) {
        console.error('Error fetching positions:', err);
        setError('Failed to fetch positions. Please try again later.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchPositions();
  }, [page, pageLimit]);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Breadcrumbs items={breadcrumbItems} />

      <div className="flex items-start justify-between">
        <Heading
          title={`Positions (${totalPositions})`}
          description="See your positions here"
        />
        <Link href={'/dashboard/positions/new'} className={cn(buttonVariants({ variant: 'default' }))}>
          <Plus className="mr-2 h-4 w-4" /> Add New
        </Link>
      </div>
      <Separator />

      {isLoading ? (
        <div>Loading...</div>
      ) : error ? (
        <div>{error}</div>
      ) : (
        <PositionsTable
          searchKey="symbol"
          pageNo={page}
          columns={columns}
          totalPositions={totalPositions}
          data={positions}
          pageCount={Math.ceil(totalPositions / pageLimit)}
        />
      )}
    </div>
  );
}

I tried creating a flag and see if that helps. Console logs to check what was happening. SO I have a page system too.
Where when I click on the second page, it immediately goes back to page 1. Just unable to figure this out for some reason and I feel I am missing something in the useEffect.

I have checked to see if use strict mode is enabled. And tried disbaling that. Also testing in prod but to no effect.

I tried changing a few things in the useEffect of the Positions Table file and that just dsetroyed my API call and was making the calls nonstop. Here is the PositionsTable gist: https://gist.github.com/vnl/03fd6f02482de8578129c84cf53f03fb

Giphy link to the behaviour: https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdmtxMnk5N2xpbjF4Z2hyMGIxMWRxeXd1MGJuejU2dnQ1enVuanE5eiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/e3Ia1uWeoxKfsvhlwD/giphy.gif