Apache guacamole: I can't establish a valid connection to the apache guacamole server via its javascript api(guacamole-common-js)

Question

I've only been using apache guacamole for a short time, and the lack of documentation for devs makes my task too complicated. I've already been able to install my apache guacamole server and solve the cors font problem via a reverse proxy, but now I'm stuck trying to establish a connection between my react app and the guacamole server. i get an xml error telling me that the connection request is incorrect. i understand the error but i can't do anything because i don't understand part of the request i made to the server myself.

const tunnel = new Guacamole.HTTPTunnel(
      `https://domain/tunnel`, false,
      { 'Authorization': `Bearer C0EF00672DABBC895E76F93E83ABA6A875718564ADEF458FAF4C7CF570D32873` }
    );
    const dataSource = "mysql";
    const id = "2";
    const type = "c";
    const token = "C0EF00672DABBC895E76F93E83ABA6A875718564ADEF458FAF4C7CF570D32873";

    useEffect(()=>{
        //const tunnel = new Guacamole.WebSocketTunnel(baseUrl);
        const guac = new Guacamole.Client(tunnel);
          $('.guacamole').append(guac.getDisplay().getElement());
         // guac.connect(`{"host" : 1, "endpoint" : "/"}`);
          guac.connect(
           `token=${token}&GUAC_DATA_SOURCE=${dataSource}&GUAC_ID=${id}&GUAC_TYPE=${type}&GUAC_WIDTH=3712&GUAC_HEIGHT=1310&GUAC_DPI=192` //&GUAC_TIMEZONE=Europe%2fBerlin&GUAC_AUDIO=audio%2fL8&GUAC_AUDIO=audio%2fL16&GUAC_IMAGE=image%2fjpeg&GUAC_IMAGE=image%2fpng&GUAC_IMAGE=image%2fwebp`
          );
        // eslint-disable-next-line
        guac.onerror = (error) => console.log(error.message);
    },[])

please can someone explain to me how guacamole's connect() method works and the usefulness of the different attributes(GUAC_ID,GUAD_TYPE). Thank you

i tried to find documentation or explanations of this method and attributes on other sites but couldn't find any. i tried to look for code examples but nothing was explicit enough.