Error: " ⨯ Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead."

My mission is simple. I have a side navbar (Client Side Component) that controls the filtering on my blog posts (RSC). I have a Client Side Component with all of the states ---

const [filter, setFilter] = useState<string>("");
const [page, setPage] = useState<number>(1);
const [date, setDate] = React.useState<Date | undefined>(new Date());

....
<Suspense fallback={<h1>Loading...</h1>}>
          <BlogPosts filter={filter} pagination={PaginationCalc(page)}/>
</Suspense>

Now here is the RSC :

async function BlogPosts({ filter, pagination }: Props) {
  // Querying Redis if server side
  var posts: any = [];

  const redis = await getClient();
  posts = await redis.get("posts");
  posts = JSON.parse(posts);

  // Querying Sanity in Case not Cached
  if (!posts) {
    posts = await getAllPosts();
    await redis.set("posts", JSON.stringify(posts));
  }
  ...
}

the rest of the jsx is irrelevant the problem is that everytime I try to run this code I get this error :
" ⨯ Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead." how can I achieve my goal but get past this error?