My front-end framework is react18 and the layout I use is flex. I want to put the 3mmol component named Structure3D in the cells of the table, but the component doesn't render correctly in the browser.Here's the code for my table and Structure3D.
table
<div className='table-root'><TableContainer component={Paper}><Table size='small' aria-label='simple table'><TableHead><TableRow><TableCell>Drug Name</TableCell><TableCell align='right'>structure</TableCell><TableCell align='right'>3D structure</TableCell><TableCell align='right'>ATC</TableCell><TableCell align='right'>UniPort</TableCell></TableRow></TableHead><TableBody> {rows.map((row) => (<TableRow key={row.name} sx={{'&:last-child td, &:last-child th': {border: 0}}}><TableCell> {row.name}</TableCell><TableCell align='right'>{row.calories}</TableCell> {/*<TableCell align="right">{row.fat}</TableCell>*/}<TableCell component={Structure3D} sx={{position: 'relative'}}><Structure3D /></TableCell> {/*<TableCell>*/} {/* <VisGraph name={'123'}/>*/} {/*</TableCell>*/}<TableCell align='right'>{row.carbs}</TableCell><TableCell align='right'>{row.protein}</TableCell></TableRow> ))}</TableBody></Table></TableContainer></div>Structure3D
import React, { useEffect, useRef } from 'react';import * as $3Dmol from '3dmol';const Index = () => { const containerRef = useRef<HTMLDivElement | null>(null); useEffect(() => { const container = containerRef.current; if (container) { container.style.height = '200px'; const viewer = $3Dmol.createViewer(container, { defaultcolors: { C: { r: 0.5, g: 0.5, b: 0.5 }, // Carbon atoms as grey H: { r: 1.0, g: 1.0, b: 1.0 }, // Hydrogen atoms as white O: { r: 1.0, g: 0.0, b: 0.0 }, // Oxygen atoms as red N: { r: 0.0, g: 0.0, b: 1.0 }, // Nitrogen atoms as blue // You can add more elements as needed } }); const sdfData = ` molecule 10 9 0 0 0 0 0 0 0 0 0 0 0 C 0.0000 1.4020 0.0000 C 1.2140 0.7010 0.0000 C 1.2140 -0.7010 0.0000 C 0.0000 -1.4020 0.0000 C -1.2140 -0.7010 0.0000 C -1.2140 0.7010 0.0000 H 0.0000 2.4940 0.0000 H 2.1490 1.2470 0.0000 H 2.1490 -1.2470 0.0000 H 0.0000 -2.4940 0.0000 `; viewer.addModel(sdfData, "sdf"); viewer.setStyle({}, { stick: {} }); viewer.zoomTo(); viewer.render(); const canvas = container.querySelector('canvas'); if (canvas) { canvas.id = "structure3d-canvas"; } } // return () => { // if (container) { // container.innerHTML = ''; // } // }; }, []); return (<div ref={containerRef} className='structure-3d-root' /> );};export default Index;I tried to check the css element, and I found that no matter how I make an explicit or implicit adjustment, I can only adjust the height of the div that wraps Structure3D, and the height of the canvas in the Structure3D tag is always 0, how should I adjust my code so that this component can be rendered correctly?canvas in Structure3D element,Structure3D element