我目前正在使用TypeScript进行Next.js 13项目，在那里我使用useDrag钩子。虽然我在Visual Studio代码编辑器中没有收到任何错误，但在尝试呈现页面时遇到了错误消息。错误消息表明useMemo函数有问题，它无法读取null的属性。
服务器错误

TypeError: Cannot read properties of null (reading 'useMemo')
This error happened while generating the page. Any console logs will be displayed in the terminal window.

这是源代码

import { useDrag } from 'react-dnd';
import { ItemType } from './../types/ItemType';
import React, { useMemo } from 'react';


interface HeaderProps {
  width: number;
  height: number;
  background: string;
}

const Header = ({ width, height, background }: HeaderProps) => {
  const [drag, dragRef] = useMemo(() => {
    return useDrag(() => ({
      type: ItemType.HEADER,
      item: { width, height, background },
      collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
      }),
    }), [width, height, background]);
  }, [width, height, background]);

  const isDragging = drag?.isDragging as boolean;

  return (
    <div
      ref={dragRef}
      style={{
        width,
        height,
        background,
        opacity: isDragging ? 0.5 : 1,
        cursor: 'move',
      }}
    />
  );
};

export const SideMenu = () => {
  return (
    <div style={{ width: '300px', background: '#f8f8f8' }}>
      <Header width={200} height={50} background="blue" />
    </div>
  );
};

我错过了什么？还是这里出了什么问题