How to use in Block Editor - react-bootstrap?

Question

I want to use in Guttenberg block some of tools used in react-bootstrap but something not work in my code property.

First I npm install react-bootstrap [email protected] the newest version, and this is register in package.json as well. Then in edit.js I try to import all dependencies:

 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import Card from 'react-bootstrap/Card';
  import React, { Component } from "react";
  import { IWPGBlock } from 'react-gutenberg/'
import * as React from 'react'

and for sure that I made it correctly use an example from react's page.

export default function Edit() {

     return (
         <p {...useBlockProps()}>
<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

         </p>
     );
 }

unfortunetelly, it did not work. I have no clue what I should change, can you give me a feedback?

UPDATE:

I try another way to solve this problem. I create another file to make my own component: komponent.js

import Card from 'react-bootstrap/Card';
import React, { Component } from "react";


export default class  cardcomponents extends Component  {
render(){
    return (
        <p {...useBlockProps()}>
<Card style={{ width: '18rem' }}>
 <Card.Img variant="top" src="holder.js/100px180" />
 <Card.Body>
   <Card.Title>Card Title</Card.Title>
   <Card.Text>
     Some quick example text to build on the card title and make up the bulk of
     the card's content.
   </Card.Text>
   <Button variant="primary">Go somewhere</Button>
 </Card.Body>
</Card>

        </p>
    );
}
}

then it import to edit.js just like that import {cardcomponents} from './komponent.js';

and try to render

 export default function Edit() {

     return (
         <p {...useBlockProps()}>

<effectivecards />
<p>another div</p>
         </p>
     );
 }

but this show me just another div. somewhere must be a mistake.