Hey guys so I have a template component like so that receives a prop breakpointType which could either be server or client. If it's passed server, then I'd like it to retrieve ServerSide breakpoints where the breakpoints are performed with pure css so no need for use client anywhere. If it passed client then the breakpoints are done client side (w react-responsive). I then use these components in the return jsx.

The problem is that even when I'm passing in server as the breakpointType nextjs still complains about the createContext is not a function for ClientSide...Breakpoint. I verified that it is purely because the return for the ClientSideBreakpoints is present even if it is not run. What can I do to make it so that I can pass in server and client as my breakpointTypes and conditionally retrieve these components accordingly?

const BarbershopDetailsTemplate = (props: Props) => {
  const {
    ...Components
    breakpointType,
  } = props

  const getBreakpoints = (breakpointType: BreakpointType) => {
    if (breakpointType === 'server') {
      return {
        desktop: ServerSideDesktopBreakpoint,
        mobile: ServerSideMobileBreakpoint,
      }
    }
    return {
      desktop: ClientSideDesktopBreakpoint,
      mobile: ClientSideMobileBreakpoint,
    }
  }
  
  const { desktop: DesktopBreakpoint, mobile: MobileBreakpoint } =
    getBreakpoints(breakpointType)