FrameLoop.ts:110 TypeError: r.willAdvance is not a function

[macorifice]

Hi, I'm using Pager component from Sancho in this way:

import React, { useState } from 'react';
import { Layer, Pager, TabPanel, Text, DarkMode, Tabs, Tab, TabIcon, IconBell, IconShoppingCart, IconHome, IconSettings, IconUser, Divider } from 'sancho';
import Cart from './Cart';
import Home from './Home';
import Profile from './Profile';
import Settings from './Settings';
import Notification from './Notification';

function TabsMenu () {
    const [index, setIndex] = useState(0);

    return (
        <Layer css={{ maxWidth: "500px", margin: "0 auto", overflow: "hidden" }}>
            <Pager
                css={{ height: "200px" }}
                value={index}
                onRequestChange={i => setIndex(i)}
            >
                <TabPanel id="home" className="Tab-panel">
                    <Text><Home></Home></Text>
                </TabPanel>
                <TabPanel id="user" className="Tab-panel">
                    <Text><Profile></Profile></Text>
                </TabPanel>
                <TabPanel id="settings" className="Tab-panel">
                    <Text><Settings></Settings></Text>
                </TabPanel>
                <TabPanel id="cart" className="Tab-panel">
                    <Text><Cart></Cart></Text>
                </TabPanel>
                <TabPanel id="notification" className="Tab-panel">
                    <Text><Notification></Notification></Text>
                </TabPanel>
            </Pager>
            
            <div>
                <Divider />  
            </div>

            <DarkMode>
                {darkTheme => (
                    <div css={{ background: darkTheme.colors.background.tint2 }}>
                        <Tabs
                            variant="evenly-spaced"
                            value={index}
                            slider={false}
                            onChange={i => setIndex(i)}
                        >
                            <Tab id='1'>
                                <TabIcon icon={<IconHome />} label="Home" />
                            </Tab>
                            <Tab id='2'>
                                <TabIcon icon={<IconUser />} label="User" />
                            </Tab>
                            <Tab id='3'>
                                <TabIcon icon={<IconSettings />} label="Settings" />
                            </Tab>
                            <Tab id='4'>
                                <TabIcon icon={<IconShoppingCart />} label="Cart" />
                            </Tab>
                            <Tab id='5'>
                                <TabIcon icon={<IconBell />} label="Notification" />
                            </Tab>
                        </Tabs>
                    </div>
                )}
            </DarkMode>
        </Layer>
    );
}

export default TabsMenu

In dev everything is ok but when I deploy my app to Heroku I get this error:

FrameLoop.ts:110 TypeError: r.willAdvance is not a function
    at FrameLoop.ts:173
    at Module.gl (react-dom.production.min.js:244)
    at v.advance (FrameLoop.ts:169)
    at n (FrameLoop.ts:107)

These are my dependencies:

  "dependencies": {
    "@emotion/core": "10.1.1",
    "@emotion/css": "^11.0.0",
    "@emotion/react": "^11.1.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^17.0.0",
    "palx": "^1.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "sancho": "^3.5.6",
    "typescript": "^4.0.3",
    "uuid": "^8.3.1",
    "web-vitals": "^0.2.4"
  }