Huge problem with SearchBox from TomTom (NextJS and Raect)

Question

I've been working on this for 3 days. I tried to use the NPM package from TomTom at the start of NextJS and now trying React.

I added a code as the documentation says:

const ttSearchBox = new SearchBox(services, options);
const searchBoxHTMLwork = ttSearchBox.getSearchBoxHTML();
//Attach searchboxHTML to your page

This last (searchBoxHTMLwork) returns (when I console.log this) a "family" of divs. And it is ok! But when i tried to return() this from the component I'm getting error:

Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead.

I've tried methods like appendChild, and outerHTML for nothing :(

NPM package: https://www.npmjs.com/package/@tomtom-international/web-sdk-plugin-searchbox

Sample of my code:

function TomTom() {
    let options = {
        searchOptions: {
          key: "IputedheremyAPI",
          language: "en-GB",
          limit: 5,
        },
        autocompleteOptions: {
          key: "IputedheremyAPI",
          language: "en-GB",
        },
      }      
      
      const ttSearchBox = new SearchBox(services, options);
      const searchBoxHTML = ttSearchBox.getSearchBoxHTML();
      console.log(searchBoxHTML)

    return (
      <div className="App border-2 border-gray-900 w-[200px] h-[100px] m-[20px]">
            {searchBoxHTML} 
      </div>
    );
  }

I really don't know what I have to do to solve this problem.