Pageable: The container could not be found.

[iamlorddop]

I created React app and when I use Pageable its thrown a error: App.jsx:9 Pageable: The container could not be found.

Code example:

import { useState } from 'react'
import Pageable from 'pageable'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const pageable = new Pageable('#container', {
    childSelector: "[data-anchor]",
    anchors: [],
    animation: 700,
  });

  return (
    <> 
      <div id="container">
        <div data-anchor="Page 1" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
        <div data-anchor="Page 2" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
        <div data-anchor="Page 3" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
      </div>

    </>
  )
}

export default App