Хочу сделать плавный скролл к якорной ссылке в next js, но что-то он ругается

Подскажите, пожалуйста, что я не так пишу. Не понимаю ошибки. Пытался использовать пакет react-scroll, но выходили ошибки, теперь попытался просто JS код написать и тоже выдает ошибку... Что не так?

import React from 'react';
import stylesHeader from '../styles/Header.module.css';

const scrollToContent = (e, contentId) => {
  e.preventDefault();

  const content = document.getElementById(contentId);
  if (content) {
    content.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'nearest'
    });
  }
};

const Header = () => {
  return (
    <div className={stylesHeader.headerGeneral}>
      <div className={stylesHeader.submenuHeader}>
        <h1>Logo</h1>
        <nav className={stylesHeader.navHeader}>
          <ul className={stylesHeader.list}>
            <li>
              <a onClick={(e) => scrollToContent(e, 'productos')} className={stylesHeader.linkHeader}>
                Nuestros productos
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default Header;

и вот ошибка:

• error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1910:12) @ resolveModelToJSON
• error Error: Event handlers cannot be passed to Client Component props. ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component. at stringify () null
• error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1910:12) @ resolveModelToJSON
• error Error: Event handlers cannot be passed to Client Component props. ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component. at stringify () digest: "133635864" null