The problem will be that your wrapperRefPopup.current becomes undefined initially and youre fallbacking to 0, reading 0.width/0.height is undefined. Normally refs should be accessable in first useEffect. This might have something to do with the dialog component. To insure your ref is set everytime I'd recommend to use useState instead of useRef and have it in the useEffect dep.

const [wrapperPopup, setWrapperPopup] = useState(null)

useEffect(() => {
 if(wrapperPopup) {
  const { widht, height } = wrapperPopup.getBoundingClientRect()
 }
}, [wrapperPopup])
...

<div ref={setWrapperPopup}>
...

}

You can get the width and height via the useRef hook, like so:

// ...
const wrapperRefPopup = useRef();
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

useEffect(() => {
    if (wrapperRefPopup.current) {
        setWidth(wrapperRefPopup.current.clientWidth);
        setHeight(wrapperRefPopup.current.clientHeight);
    }
}, []);

// ...

This is issue with BootstrapDialog

I kept below code [Actual code for charts] in separate component-

 <Typography component="div" sx={{
          minWidth: '45rem',
          marginLeft: '4rem',
          marginRight: '4rem',
          paddingTop: '1.5rem',
        }}>
    <div>
        
    <svg ref={svgColorCodeRefPopup} style={{width:"-webkit-fill-available"}}>
</svg>
    </div>
      <div
        ref={wrapperRefPopup}
        style={{ width: "100%", height: "12.5rem", marginBottom: "2rem" }}
      >
        
        <svg ref={svgRefPopup} style={{ width: "100%", height: "110%",marginTop:"0%" }}>
          <g className="x-axis" />
          <g className="y-axis" />
        </svg>
      </div>
      </Typography>

I rendered this separate component having above code from current component having BootstrapDialog

<BootstrapDialog
        style={{height:'auto', zIndex:500}}        
        aria-labelledby="customized-dialog-title"
        open={true}
      >        
        <IconButton
          aria-label="close"
          onClick={closeModal}
          sx={{
            position: 'absolute',
            right: 8,
            top: -5,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon fontSize="medium" style={{paddingTop:"0.5rem", paddingRight:'0.2rem', color:'#000'}} />
        </IconButton>
    **<SeparateComponent>**
 </BootstrapDialog>

This way it worked.