toImage - TypeError: Cannot read properties of null (reading 'getAttribute')

plotly.js
1

Hi, im trying to save image from my plot internaly and then add it to pdf which which will be downloaded.

Im trying to use Plotly.toImage but im getting this error.

Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘getAttribute’)
at ut.attr (d3.v4.min.js:2)
at makePlotFramework (plot_api.js:3690)
at Object._doPlot (plot_api.js:140)
at Object.newPlot (plot_api.js:566)
at to_image.js:224
at new Promise ()
at Object.toImage (to_image.js:223)
at a (BoxPlot.js:24)
at onClick (BoxPlot.js:38)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates$1 (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
attr @ d3.v4.min.js:2
makePlotFramework @ plot_api.js:3690
_doPlot @ plot_api.js:140
newPlot @ plot_api.js:566
(anonymous) @ to_image.js:224
toImage @ to_image.js:223
a @ BoxPlot.js:24
onClick @ BoxPlot.js:38
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
Promise.then (async)
a @ BoxPlot.js:24
onClick @ BoxPlot.js:38
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

My code:
import * as Plotly from ‘plotly.js’;

const BoxPlot = ({data }) => {

const test = () => {
var divGraph = document.getElementById(‘box-plot’);
console.log(divGraph);

Plotly.toImage('box-plot', { height: 400, width: 500 }).then(function (url) {
  console.log(url);
});

};

return (


<button onClick={() => test()}>button
{!isEmpty(boxPlotData) && (
<Plot
divId=‘box-plot’
className=‘modebar-container’
data={data}

    />
  )}
</div>

);
};

export default BoxPlot

Any ideas?