SVG was created in canvas in the application but no thing are shown

plotly.js
1

i was try use violin plot in my project.
SVG was created in canvas in the application but no thing are shown.

i was use plotly inside nextJS

"next": "^13.1.4",
"plotly.js": "^2.20.0"

const CompetenciesPlot = (props) => {

  const labels = Object.keys(props.cmap);
  const dataValue = new Array(labels.length).fill(0);
  // get data
  const ref = useRef(null);

  useEffect(() => {
    const data = {
      x: labels,
      y: dataValue,
      points: "outliers",
      box: {
        visible: true,
        fillcolor: 'rgba(213, 108, 108, .5)',
        width: .8,
      },
      line: {
        color: 'rgb(213, 108, 108)',
      },
      meanline: {
        visible: true
      },
  }
  const layout = {
    title:  `Competence Assessment by ${props.title || "Grad"}`,
    showlegend: false,
    width: props.w || 5000,
    hight: props.h || 100,
    yaxis: {
      zeroline: false,
      gridwidth: 2
    },
  };

  const config = {
    responsive: true,
    staticPlot: true,
  }


  MyPlot({ref: ref, data: [data], layout: layout, config: config});
  }, [])

  return <canvas  ref={ref}></canvas>
  
}

export default CompetenciesPlot;

because of another problem in importing plotly i was forced to use this work-around trick and it work in another graph


function MyPlot(props) {

    const work = async () => {
        const Plotly = await import('plotly.js');
        const whenLoaded = (e) => {
        if(props.ref.current){
            Plotly.newPlot(
            props.ref.current,
            props.data,
            props.layout || {},
            props.config || {}
            )
        }
        }
        setTimeout(whenLoaded, 100);
    }
    work()
}

export default MyPlot;