"fullpage.js Error: 'Cannot Find Name menu' When Initializing Fullpage with React"

Question

I'm encountering an issue while trying to initialize a fullpage.js instance within a React application. The specific error message I'm facing is when I hover under the underlined word autoScrolling is: "Cannot Find Name autoScrolling." I'm using the following code to initialize fullpage.js:

import ReactFullpage from "@fullpage/react-fullpage";
export default function Elyes() {
  return (
    <>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css"
        integrity="sha512-otONSJGv1l0LjJXcgyqi2MeKXtnthkiXAleeQjFJOKYcVD5u+mOuPb7xCnlsb74Ld+N0ONbP7KYRmW2/OWrvaA=="
        crossOrigin="anonymous"
        referrerPolicy="no-referrer"
      />

      <div id="fullpage">
        <div className="section s1">
          <h1>The First Section</h1>
        </div>
      </div>
      <script
        src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"
        integrity="sha512-LGiXf+jHGTHcIybSsOWO3I/in+OObCkcEsWIZ7IyhzfD6RzD5qDUw2CK+JveuI7zTSEcDG//bIOvOpAJW2BWsg=="
        crossOrigin="anonymous"
        referrerPolicy="no-referrer"
      ></script>
      <script>const fullpage = new fullpage('#fullpage',{autoScrolling:true});</script>
    </>
  );
}

and the error displayed on the browser is

[plugin:vite:react-swc] × Expression expected
   ╭─[D:/WebDev/personalWebsite/src/components/elyes.tsx:1:1]
 1 │ import ReactFullpage from "@fullpage/react-fullpage";
 2 │ export default function Elyes() {
 3 │   return (
 4 │     <>
   ·      ─
 5 │       <link
 6 │         rel="stylesheet"
 6 │         href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css"
   ╰────

  × Expected ',', got 'id'
    ╭─[D:/WebDev/personalWebsite/src/components/elyes.tsx:10:1]
 10 │         referrerPolicy="no-referrer"
 11 │       />
 12 │ 
 13 │       <div id="fullpage">
    ·            ──
 14 │         <div className="section s1">
 15 │           <h1>The First Section</h1>
 15 │         </div>
    ╰────


Caused by:
    Syntax Error
D:/WebDev/personalWebsite/src/components/elyes.tsx:1:1

I didn't know what to do as everything is fine until I add the Curly bracket {autoScrolling:true} of <script>const fullpage = new fullpage('#fullpage',{autoScrolling:true});</script>