Can not set Cytoscapejs container element in next js

Im working on a Next.js project that requires the use of cytoscapejs. So far I have tried to type document.getElementById('cy') and $('#cy') but none of those work.

import Head from "next/head"
import cytoscape from 'cytoscape';

var cy = cytoscape({

  //container: !!??!!

  elements: [],

  style: [],

  layout: {}
});



export default function Grafo1() {

    return (
        <div>
            <Head>
              <title>Graph 1.</title>
            </Head>

            
            <div id="cy">
              //graph here
            </div>
            
        </div>
    )
}

I have tried a react library called react-cytoscape but thows an error "window is not defined" when I refresh the page becouse nextjs works with ssr and the graph component falls apart when refreshed. Also tried the dynamic module that deactivates ssr but still doesn`t work.

I`d style this somewhere else. Any ideas?