While loop crash depending on context

[Samx070201]

It appears that depending on the context where the component is placed, the async/chain animation composed with the useSpring hook stops working and crashes the application.
I have recreated the code inside Codesandbox, even though inside an isolated environment it looks like it doesn't have any issues.

#982 seems to be the most similar problem to what has happened to me, unfortunately though I'm yet unable to upgrade to the beta version of the library (9.x.x), which judging by what the closing answer for the mentioned issue was, fixed the issue.

Having said this, i was wondering if anybody could help me out understand what the problem seems to be with this loop/crash situation apparently randomly happening.

REFERENCE
For some references I'm gonna leave the Codesandbox link and my package json dependencies in order to maybe get a better understanding of what might be going on. If anything else is needed I can for sure post more informations about the issue.

https://codesandbox.io/s/while-loop-showcase-forked-smqre?file=/src/index.js

package.json

{ "name": "fuse-react-app", "version": "5.1.0", "private": true, "dependencies": { "@date-io/core": "1.3.13", "@date-io/date-fns": "1.3.13", "@date-io/moment": "1.3.13", "@material-ui/core": "4.11.0", "@material-ui/icons": "4.9.1", "@material-ui/lab": "^4.0.0-alpha.57", "@material-ui/pickers": "3.x.x", "@popperjs/core": "^2.6.0", "@reduxjs/toolkit": "1.4.0", "@tippyjs/react": "^4.2.0", "auth0-lock": "11.26.3", "autosuggest-highlight": "3.1.1", "axios": "0.19.2", "axios-mock-adapter": "1.18.2", "chart.js": "2.9.3", "clsx": "1.1.1", "cross-fetch": "3.0.5", "customize-cra": "^1.0.0", "customize-cra-react-refresh": "^1.1.0", "date-fns": "2.14.0", "devextreme": "20.2", "devextreme-react": "20.2", "final-form": "^4.20.1", "firebase": "7.19.1", "formsy-react": "2.2.1", "google-map-react": "1.1.7", "history": "4.10.1", "i18next": "19.7.0", "isomorphic-fetch": "2.2.1", "jsonwebtoken": "8.5.1", "jss": "10.4.0", "jss-plugin-extend": "10.4.0", "jss-rtl": "0.3.0", "jwt-decode": "2.2.0", "keycode": "2.2.0", "lodash": "4.17.20", "marked": "0.8.2", "material-table": "1.68.0", "material-ui-popup-state": "1.6.1", "mobile-detect": "1.4.4", "moment": "2.27.0", "mui-rff": "^3.0.3", "notistack": "0.9.17", "path-to-regexp": "3.2.0", "perfect-scrollbar": "1.5.0", "prismjs": "1.21.0", "prop-types": "15.7.2", "qs": "^6.9.4", "raw-loader": "4.0.1", "react": "^17.0.1", "react-autosuggest": "10.0.2", "react-beautiful-dnd": "13.0.0", "react-big-calendar": "0.27.0", "react-chartjs-2": "2.10.0", "react-dom": "^17.0.1", "react-draggable": "4.4.3", "react-final-form": "^6.5.2", "react-frame-component": "4.1.3", "react-grid-layout": "^1.2.0", "react-i18next": "11.7.2", "react-masonry-css": "1.0.14", "react-merge-refs": "^1.1.0", "react-number-format": "4.4.1", "react-popper": "^2.2.4", "react-redux": "7.2.1", "react-reveal": "^1.2.2", "react-router": "5.2.0", "react-router-config": "5.1.1", "react-router-dom": "5.2.0", "react-scripts": "3.4.3", "react-select": "3.1.0", "react-spring": "^8.0.27", "react-swipeable-views": "0.13.9", "react-swipeable-views-utils": "0.13.9", "react-table": "7.5.0", "react-text-mask": "5.4.3", "react-tippy": "^1.4.0", "react-use-gesture": "^8.0.1", "react-virtualized": "9.22.2", "react-window": "1.8.5", "redux": "4.0.5", "redux-logger": "4.0.0", "styled-components": "^5.2.1", "typeface-muli": "1.1.3", "velocity-animate": "1.5.2", "velocity-react": "1.4.3" }, "resolutions": { "react": "^17.0.1", "react-dom": "^17.0.1", "date-arithmetic": "3.1.0", "chalk": "2.4.2" }, "devDependencies": { "@babel/core": "^7.12.10", "@babel/node": "7.10.4", "@babel/preset-env": "7.10.4", "@testing-library/react": "^11.2.3", "@yarnpkg/pnpify": "2.2.1", "babel-eslint": "10.1.0", "cross-env": "7.0.2", "cypress": "^6.2.1", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^6.10.0", "eslint-import-resolver-node": "^0.3.3", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.19.0", "eslint-plugin-react-hooks": "^1.7.0", "js-beautify": "1.11.0", "prettier": "^2.0.5", "promise": "8.1.0", "purgecss": "1.4.2", "react-app-rewired": "^2.1.6", "source-map-explorer": "2.5.0", "tailwindcss": "1.8.6", "tailwindcss-dir": "4.0.0" }, "scripts": { "start": "yarn run tailwind && react-app-rewired start", "build": "yarn run tailwind && yarn run purge-tailwind && cross-env GENERATE_SOURCEMAP=false react-app-rewired build", "tailwind": "tailwind build ./src/styles/tailwind-config.css -c ./tailwind.config.js -o ./src/styles/tailwind.css", "purge-tailwind": "node ./purge-tailwindcss.js", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject", "build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets @babel/preset-env src/app/main/documentation/material-ui-components/build.js", "analyze": "yarn run tailwind && yarn run purge-tailwind && react-scripts build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html", "pnpify-sdk": "yarn pnpify --sdk", "lint": "eslint", "cypress": "cypress open" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

ENVIRONMENT
react: 17.0.1
react-dom: 17.0.1
react-spring: 8.0.27