Objects are not valid as a React child (found: object with keys {$and}).

[modyabhi]

Describe the bug

I am trying to use the logical constructor as described in https://fusejs.io/api/query.html

const queryArray = {
      $and: [{ $path: ["quality"], $val: choiceConcat}]

    };

options = {
keys: ["fullName", "quality"],
    threshold: 0.3,
    matchAllOnEmptyQuery: true,
    ignoreLocation: true,
    useExtendedSearch: true,
}

Version

 "dependencies": {
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "dotenv": "^16.0.2",
    "fs": "^0.0.1-security",
    "fs-extra": "^10.1.0",
    "fuse.js": "^6.6.2",
    "next": "12.3.0",
    "nextjs-cors": "^2.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-select": "^5.4.0",
    "swr": "^1.3.0",
    "tf2-get-player-items": "^0.0.6",
    "tf2-item-format": "^5.8.2",
    "throttle-debounce": "^5.0.0",
    "unusual-effects": "^1.8.0"
  },

Additional context

using it in react-next framework

Error

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {$and}). If you meant to render a collection of children, use an array instead.

[modyabhi]

The issue is unrelated to fuse.js but upon closer inspection it was with rendering the query that caused the issue.

This is resolved.