I'm getting this error:
Attempted to call useBoardContext() from the server but useBoardContext is on the client.
The useBoardContext is a client component that uses usecontext And the component that throwes this error is a server component,
can I save the parent component to be server component and use in some how the usecontext function?

this is the useBoardContext

'use client'

import { BoardContext } from "../context/boardContext";
import { useContext } from "react";

export const useBoardContext = () => {
  const context = useContext(BoardContext);

  if (!context) {
    throw Error('useBoardContext must be used inside an BoardContextProvider');
  }

  return context;
}

and this is the server component

import React from 'react';
import { useBoardContext } from '@/board/hooks/useBoardContext';

function list() {

  const { board } = useBoardContext();

  return (
    <>  
      {
        board?.lists?.map((items, droppableIndex) => (
        <Droppable id={"drop-"+droppableIndex} className="droppable" key={items._id} initialItems={items} index={droppableIndex}>
          {(innerRef) => (
            <>
            </>
          )}
        </Droppable>
      ))}
    </>
  );
}