ForceGraph3D does not render on the initial load, but after multple saves of index.html

Custom Components
1

Hi all,

I am trying to create a custom component using the 3d-force-graph library.

The component when run on its own works perfectly fine, however when trying to use it within my Streamlit app, I need to strangely save the index.html file multiple times for it to start appearing. On the initial load, nothing appears.

Here is an example:
ezgif-459795e7015802

Is there a problem with Streamlit or my frontend code? How do I change it so that it loads up immediately without any resaving.

My frontend code:

import { Streamlit, RenderData } from "streamlit-component-lib"
import ForceGraph3D from '3d-force-graph';

const N = 300;
const gData = {
  nodes: [...Array(N).keys()].map(i => ({ id: i })),
  links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => ({
      source: id,
      target: Math.round(Math.random() * (id-1))
    }))
};

const Graph = new ForceGraph3D(document.getElementById('root') as any)
    .graphData(gData);
Streamlit.setFrameHeight(700)
Streamlit.setComponentReady()

My index.html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Streamlit Component</title>
    <meta charset="UTF-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Streamlit Component" />
    <link rel="stylesheet" href="bootstrap.min.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

My init.py code:

import os
import streamlit.components.v1 as components

_RELEASE = False

if not _RELEASE:
    _component_func = components.declare_component(
        "force-3d-component",
        url="http://localhost:3001",
    )
else:
    parent_dir = os.path.dirname(os.path.abspath(__file__))
    build_dir = os.path.join(parent_dir, "frontend/build")
    _component_func = components.declare_component("force-3d-component", path=build_dir)

def force-3d-component(name, key=None):
    component_value = _component_func(name=name, key=key, default=0)
    return component_value

And my example.py code:

import streamlit as st
from force-3d-component import force-3d-component

st.write("TEST")
num_clicks = force-3d-component("World")
st.write("DONE")

Kindly advise me on why it is rendering incorrectly and what needs to be done.