React problem with FabricJs separate modules

Question

The problem is when I separate canvas to another file it doesn't work, but in the same file it works perfectly. App.js file:

import './App.css';
import Prva from './komponente/prva';
import { fabric } from 'fabric';

function App() {

  let canvas = <Prva/>;

  return (

    <div className="App">
      
    <canvas id="canvas"/>

    </div>
  );
}

export default App;

prva.js file

import React from 'react'
import { fabric } from 'fabric'
import { useState, useEffect } from 'react';

export default function Prva() {

    const [canvas, setCanvas] = useState('');

    useEffect(() => {
        setCanvas(initCanvas());
      }, []);  
 
      const initCanvas = () => (
        new fabric.Canvas('canvas', {
          height: 545,
          width: 1150,
          backgroundColor: 'red'
        })
      ); 

      return canvas;

}

It's just that I don't know how to do it.

TNX in advance