create-next-app has some issue with packages compared with create-react-app

I have worked with create-react-app repo before. But recently I am using create-next-app repo for server side rendering. I created a project with npx create-react-app and install a package for example npm install react-burger-menu --save from github and then use it in App.js. everything is working:

import './App.css';
import { slide as Menu } from 'react-burger-menu'

function App() {
    var styles = {
     ...
    }


    return (
    <div className="App">
      <Menu styles={styles}>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
        <a className="menu-item--small" href="">Settings</a>
      </Menu>
    </div>
  );
}

export default App;

but I use this package in project npx create-next-app:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {slide as Menu} from "react-burger-menu";

export default function Home() {
    var styles = {
     ...
    }
    return (
        <Menu styles={ styles } >
            <a id="home" className="menu-item" href="/">Home</a>
            <a id="about" className="menu-item" href="/about">About</a>
            <a id="contact" className="menu-item" href="/contact">Contact</a>
            <a className="menu-item--small" href="">Settings</a>
        </Menu>
    );
}

but it creates following error:

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

this error apears almost with every package I install