React.js and Mobx. 'TypeError: cyclic object value' if i try to find item in the mobx collection

Question

My mobx class:

class ProductItems {
  products = [
    { id: 1, image: window.location.origin + '/images/tmp/01.png', price: '₴184.21' },
    { id: 2, image: '/images/tmp/02.png', price: '₴311.21' },
    { id: 3, image: '/images/tmp/03.png', price: '₴221.21' },
    { id: 4, image: '/images/tmp/04.png', price: '₴91.21' },
    { id: 5, image: '/images/tmp/05.png', price: '₴221.21' },
    { id: 6, image: '/images/tmp/06.png', price: '₴131.21' },
    { id: 7, image: '/images/tmp/07.png', price: '₴161.21' },
    { id: 8, image: '/images/tmp/08.png', price: '₴101.21' },
    { id: 9, image: '/images/tmp/09.png', price: '₴109.21' },
  ]

  constructor() {
    makeAutoObservable(this)
  }

  findById(id) {
    return this.products.find(product => product.id === id)
  }
}

export default new ProductItems()

I try access to filtered product:

import './ProductDetail.css'
import { useParams } from 'react-router-dom'
import store from '../../store/products-store'
import { observer } from 'mobx-react-lite'
import { useEffect, useState } from 'react'

const ProductDetail = () => {
  const { id } = useParams()
  const [product, setProduct] = useState({})
  useEffect(() => {
    setProduct(store.findById(+id))
    // setProduct(store.products.find(product => product.id == id))
  }, [id])
  const { price, image } = product
  return (
    <section className="product-detail">
      <div>
        Product Page: {id}
      </div>
      <div>Price: {price}</div>
      <div>Image: {image}</div>
    </section>
  )
}

export default observer(ProductDetail)

It works correctly and result expectable, but in the console i'm having error messages all the time:

TypeError: cyclic object value    react_devtools_backend.js:4026:25
    parseData _product.css:8
    i _product.css:10
    i _product.css:10
    _ _product.css:10
    _ _product.css:10
    l _product.css:10
    emit 1:334
    emit 1:334
    attachRenderer react_devtools_backend.js:16201
    initBackend react_devtools_backend.js:16213
    initBackend react_devtools_backend.js:16212
    setup react_devtools_backend.js:13122
    welcome react_devtools_backend.js:13068
    EventListener.handleEvent* react_devtools_backend.js:13071
    __webpack_require__ react_devtools_backend.js:20
    <anonymous> react_devtools_backend.js:84
    <anonymous> react_devtools_backend.js:87

I have no idea why it happens so i can't ignore this error until reason realized. I hope that someone came across something similar and could share explanations. Thanks.

P.S.

more details

sergii:~$ node -v
v16.5.0
sergii:~$ npm -v
7.19.1

package.json

        "mobx": "^6.6.1",
        "mobx-react-lite": "^3.4.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",

P.S.2.

_product.css (mention 8 and 10 rows)

.product-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.product-list__item {
    background-color: #f7f8f9;
    border-radius: 0.3em;
    flex: 1 1 0;
}

...

P.S.3

Git project link