How to create React/Gutenburg Card plugin?

UPDATE3: Finally I make solution that this cards show me on the editor screen but the value have not wanted to be set.

import React, { Component, Fragment } from "react";
import {
  TextControl,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  __experimentalText as Text,
  __experimentalHeading as Heading,
} from '@wordpress/components';
import {  InnerBlocks } from '@wordpress/block-editor';


export class  Cards extends Component  {


  render() {
    **let TitlesControl = ({ titles, setTitles }) => (
      <TextControl
          value={ titles }
          onChange={ titles => setTitles( titles ) }
      />
  );**

    return (

      <Fragment >

      <Card>
        <CardHeader>
        <InnerBlocks
template={ MY_TEMPLATE }
templateLock="insert"

/>
    
        </CardHeader>
        <CardBody>
        <TitlesControl/>
        </CardBody>
        <CardFooter>
     
            </CardFooter>
    </Card>
</Fragment>
    )
}
}




const MY_TEMPLATE =  [[ 'core/column', {}, [
[ 'core/heading', { content: 'Tytuł', selector: 'h2' } ], 
[ 'core/image', { default: 'Rounded' } ],

]]];



export default Cards

Update1: I try to make my new plugin to develop my skills. I have problem to use attributes and set them in component. In block.json I register:

    "attributes":{
        "title": {
            "type": "string"
        }, 
        "content": {
            "type": "string",
            "selector": "h2"
        },
        "footer": {
            "type": "string"
        }
    },

but I do not know where and how I should use them in komponent.js:

import React, { Component, Fragment } from "react";
import {
  TextControl,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  __experimentalText as Text,
  __experimentalHeading as Heading,
} from '@wordpress/components';
import {  InnerBlocks } from '@wordpress/block-editor';




export class  Cards extends Component  {

  constructor() {
        super( ...arguments );

        this.onChangeTitle = this.onChangeTitle.bind( this );
    this.onFocusTitle = this.onFocusTitle.bind( this );

    }

  onChangeTitle( value ) {
        this.props.setAttributes( { title: value } );
    }
  
  onFocusTitle( focus ) {
        this.props.setFocus( _.extend( {}, focus, { TextControl: 'title' } ) );
    }

  render() {
    

  

    return (

      <Fragment >

      <Card>
        <CardHeader>
        <InnerBlocks
template={ MY_TEMPLATE }
templateLock="insert"

/>
    
        </CardHeader>
        <CardBody>
        <TextControl
                            tagName="h2"
                            placeholder={ __( 'Write title…' ) }
                            value={ attributes.title }
                            onChange={ this.onChangeTitle }
                            focus={ focusedTextControl === 'title' }
                            onFocus={ this.onFocusTitle }
                        />
        </CardBody>
        <CardFooter>
     
            </CardFooter>
    </Card>
</Fragment>
        )
    }
}


const MY_TEMPLATE =  [[ 'core/column', {}, [
  [ 'core/heading', { content: 'Tytuł', selector: 'h2' } ], 
  [ 'core/image', { default: 'Rounded' } ],
    
]]];


export default Cards

I this component export to edit.js and there it work good, unless I try to use attributes.

in edit.js it is simple I put edit ({attributes, setAttributes}) but here? I have no clue.

UPDATE2:

i have changed approach, just now import attributes from block.json and then try to use the value. When I hover the variable, it is showing me a date from json such as type: string but still, after rendering it, I have an error.

import React, { Component, Fragment } from "react";
import {
  TextControl,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  __experimentalText as Text,
  __experimentalHeading as Heading,
} from '@wordpress/components';
import {  InnerBlocks } from '@wordpress/block-editor';
import {attributes} from './block.json';


export class  Cards extends Component  {

  render() {
  const props = {attributes}
  const {title,
  content,
footer} = attributes

    return (

      <Fragment >

      <Card>
        <CardHeader>
        <InnerBlocks
template={ MY_TEMPLATE }
templateLock="insert"

/>
    
        </CardHeader>
        <CardBody>
        <TextControl
                            label={ __( 'What\'s your name?' ) }
              value={title}
              onChange={ ( value ) => props.setAttributes( { title: value } ) }

                        />
        </CardBody>
        <CardFooter>
     
            </CardFooter>
    </Card>
</Fragment>
    )
}
}

const MY_TEMPLATE =  [[ 'core/column', {}, [
[ 'core/heading', { content: 'Tytuł', selector: 'h2' } ], 
[ 'core/image', { default: 'Rounded' } ],

]]];



export default Card