Как наклеить коробку пользовательского интерфейса на изображение в Reactjs

Question

Я пытаюсь нанести какого-нибудь короля ящиков на изображение в реакции, используя материал пользовательского интерфейса.Идея состоит в том, чтобы расположить блоки в соответствии с положением x, y, исходя из файла json.Все должно быть динамичным.Поэтому я создал компонент для изображения, а другой для коробок.

Проблема в том, что я хочу, чтобы ящики принадлежали компоненту фотографии.Я имею в виду, что коробка должна быть «прикреплена» к фотографии.Так что, если я переместу фотографию на экран, за ней появится поле.Позже я буду использовать слайдер, поэтому они должны принадлежать друг другу.

Файл Photo.js

 class Photo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            Data:DataPhoto
       }
    }

    render(){
        const {Data} = this.state; 
        return(
            <div>
                {
                    Data.map(data=>( 
                        <div>                          
                            <img key= {data.id} src={data.url} width={data.w} height={data.h} alt = "test"  className="image"/>
                        </div>      
                    ))
                }   
            </div>
        )
    }
}
export default Photo; 

CadresBox.js file

class CadresBox extends Component{
    constructor(props){
        super(props);
        this.state = {
            Data:DataCadres
        }
    }

    render(){
        const {Data} = this.state;

        const inner = (
            <Box bgcolor="none" 
            m={1} 
            border={2} 
            style={{ width: '5rem', height: '5rem' }} 
            p={3}
            position="absolute"
            zIndex="tooltip"/>
          );

    return(
        <div>
            {
                Data.map(data=>(
                    <div>
                        <Grid>
                            <Box borderColor="primary.main" top= {data.y + 'px'} left = {data.x + 'px'}  className="box" clone>
                                 {inner}   
                            </Box>
                        </Grid>
                    </div>
                ))
            }
            <Photo/>
        </div>
        )
    }
}

export default CadresBox;

App.js file

function App() {
  return (
    <div>
      <CadresBox/>
    </div>
  );
}

Заранее извините, если это фиктивный вопрос.Я как бы потерялся здесь!

Кто-нибудь может помочь?Большое спасибо!