how to use camera capacitor pluging using react - reactjs

Question

I want to open the camera of my pc via capacitor camera pluging within my react code but it fail. There is my code:
import React, { useState } from 'react';
import { Plugins, CameraResultType } from '#capacitor/core';
const App = () => {
const { Camera } = Plugins;
const [photo, setPhoto] = useState();
const takePhoto = async () => {
console.log("Launch function");
const image = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri
});
console.log(image.webPath);
setPhoto(image.webPath);
};
return (
<div className="App">
{photo ? <img src={photo} alt="test camera" /> : <span>There is no picture yet.</span>}
<button onClick={takePhoto}>Camera</button>
</div>
);
}
export default App;
and this is the error that I get:
that is my console screeshoot

Answer 1

I found the solution. Just install a load the ui component used to take the photo.
In the src/index.js I just add the following:
import { defineCustomElements } from '#ionic/pwa-elements/loader';
defineCustomElements(window);
that is my final resutl:
import React from 'react';
import { defineCustomElements } from '#ionic/pwa-elements/loader';
import ReactDOM from 'react-dom';
import App from './App';
defineCustomElements(window);
const app = (
<App />
)
ReactDOM.render(app, document.getElementById('root'));