@capacitor-community/camera-preview not working with ionic react v7

Hi I’m trying to create a biometric app but im having issue using @capacitor-community/camera-preview in Ionic react v7.

import {
IonButton,
IonButtons,
IonContent,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
} from “@ionic/react”;
import { chevronBack } from “ionicons/icons”;
import React, { useEffect, useState } from “react”;
import { useParams } from “react-router”;
import { CameraPreview } from “@capacitor-community/camera-preview”;

import “…/theme/camera.scss”;

interface RouteParams {
id: any;
}

const CameraPage: React.FC = () => {
const { id } = useParams();

useEffect(() => {
startCameraPreview();
}, );
const startCameraPreview = async () => {
await CameraPreview.start({
parent: “content”,
toBack: true,
position: “front”,
height: 800,
width: 360,
disableExifHeaderStripping: false,
rotateWhenOrientationChanged: true,
lockAndroidOrientation: true,
});

};

const stopPreview = async () => {
await CameraPreview.stop();
};

const dismiss = () => {
window.location.replace(“/home”);
}

return (

  <IonPage>

    <IonContent id="content" className="cameraPreview-content" fullscreen >

      <IonToolbar className="cameraPreview-toolbar" style={{ paddingTop: '30px' }}>
        <IonButtons slot="start">
          <IonButton mode="ios" onClick={dismiss}>
            <IonIcon icon={chevronBack} />
          </IonButton>
          <IonTitle>{id}</IonTitle>
        </IonButtons>
      </IonToolbar>

      <IonToast 
        aria-live="polite"
        isOpen={showModal} 
        position="middle"
        icon={checkmarkDone}
        header="Face Scanned" 
        message="Your face has been successfully scanned!" 
        duration={3000} 
        onDidDismiss={handleRedirect}
      />

    </IonContent>
  </IonPage>

);
};

export default CameraPage;

What is the issue that you’re having? What do you expect to happen, and what is actually happening?