Ionic take photo with React and Capacitor

I am trying to implement an application that takes a photo by pressing a button.

When pressing the button the image should be shown in an IonImg tag

But when I press Tomar Foto I get:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

Could you please help me with this


import { useState, useEffect } from "react";
import { useCamera } from '@ionic/react-hooks/camera';
import { CameraResultType, CameraSource, CameraPhoto, Capacitor, FilesystemDirectory } from "@capacitor/core";

export interface Photo {
    filepath: string;
    webviewPath?: string;

export function usePhotoGallery() {

    const { getPhoto } = useCamera();
    const [photos, setPhotos] = useState<Photo[]>([]);

    const takePhoto = async () => {
      const cameraPhoto = await getPhoto({
        resultType: CameraResultType.Uri,
        source: CameraSource.Camera,
        quality: 100
      const fileName = new Date().getTime() + '.jpeg';
        const newPhotos = [{
        filepath: fileName,
        webviewPath: cameraPhoto.webPath

    return {
const CompletarInformacion: React.FC = () => {
    return (
                <IonCol size="1"><a href={"/home"}><IonIcon icon={arrowBack} id="flecha-volver">  </IonIcon></a></IonCol>
                <IonCol id="columna2"><strong id="texto-pagina">Registro</strong></IonCol>
        <IonContent fullscreen>

  const CompletarRegistro = () => {

    const [tipo, setCount] = useState(0);

    const [photos, setPhotos] = useState<Photo[]>([]);

    function Tab2() {
      const { takePhoto } = usePhotoGallery();
    if (tipo == 0) {
      return (
        <div className="contenedor_central">
          <strong>Completá tus datos</strong>

            <IonLabel position="floating">Nombre</IonLabel>
            <IonLabel position="floating">Apellido</IonLabel>
            <IonLabel position="floating">Clave</IonLabel>

      {, index) => (
        <IonCol size="6" key={index}>
          <IonImg src={photo.webviewPath} />
          <IonButton onClick={Tab2}>Tomar Foto</IonButton>