App with coordinates

import React, { useEffect, useState, useCallback } from 'react';
import {
  CameraResultType,
  CameraSource,
  Plugins,
  FilesystemDirectory,
  Capacitor
} from "@capacitor/core";
import moment from 'moment';
import './App.css';

const LOG_PREFIX = "[App] ";

function App() {
  const [allImages, setAllImages] = useState();
  const [photo, setPhoto] = useState();
  const [lastWebPath, setLastWebPath] = useState();
  const [lastPhotoPath, setLastPhotoPath] = useState();
  const { Camera, Filesystem, Storage, Geolocation } = Plugins;
  const triggerCamera = useCallback(async () => {
    const cameraPhoto = await Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera
    });
    setPhoto(cameraPhoto);
  }, [Camera]);  

  const getCurrentPosition = async () => {
    const coordinates = await Geolocation.getCurrentPosition();
    
    return coordinates;
  }

  useEffect(() => {
    if(photo && photo.webPath !== lastWebPath){
      const setupImages = async (fileName) => {
        try {
          const imgKey = {
            key: "imagePaths"
          };
          const imagePaths = await Storage.get(imgKey);
          console.log(LOG_PREFIX + "imagePaths", imagePaths);
          const imagePathsArray = imagePaths.value ? JSON.parse(imagePaths.value) : []; 
          const coordinates = await getCurrentPosition();    
          console.log(LOG_PREFIX + 'Current location', coordinates.coords);   
          imagePathsArray.push({
            fileName,
            latitude: coordinates.coords.latitude,
            longitude: coordinates.coords.longitude
          });
          console.log(LOG_PREFIX + "imagePathsArray", imagePathsArray);
          const imagePathsArrayString = JSON.stringify(imagePathsArray);
          await Storage.set({
            key: "imagePaths", 
            value: imagePathsArrayString
          });
    
          const images = Promise.all(imagePathsArray.map(async img => {
            const fileUri = await Filesystem.getUri({
              directory: FilesystemDirectory.Data,
              path: img.fileName
            });
            const photoUrl = Capacitor.convertFileSrc(fileUri.uri);
            return (<div key={img.fileName}>
              <label>{img.fileName}</label>
              <br/>
              <label>{`latitude: ${img.latitude}, longitude: ${img.longitude}`}</label>
              <br/>
              <img 
                style={{ 
                    border: 'solid 1px red', 
                    marginLeft: 'auto', 
                    marginRight: 'auto', 
                    maxWidth: '200px', 
                    height: '300px' 
                  }}
                  src={photoUrl} 
                  alt="img" />
            </div>
            );
          }));
          const finalImages = await images;
          setAllImages(finalImages);
        } catch(err) {
          console.log(LOG_PREFIX + err);
        }
      }

      setLastWebPath(photo.webPath);

      Filesystem.readFile({
        path: photo.path
      })
      .then(async photoInTemp => {
        const date = moment().format("MM-DD-YY-h-mm-ss");
        const fileName = date + ".jpg";

        await Filesystem.writeFile({
          data: photoInTemp.data,
          path: fileName,
          directory: FilesystemDirectory.Data
        });

        const finalPhotoUrl = await Filesystem.getUri({
          directory: FilesystemDirectory.Data,
          path: fileName
        });
        const filePath = finalPhotoUrl.uri;
        const photoUrl = Capacitor.convertFileSrc(filePath);
        if (photoUrl !== lastPhotoPath) {
          console.log(LOG_PREFIX + 'photoUrl', photoUrl);
          setLastPhotoPath(photoUrl);
        }

        setupImages(fileName);
      });
    }
  }, [photo, Filesystem, Storage, lastPhotoPath, lastWebPath, getCurrentPosition]);

  const onClickCamera  = () => {
    triggerCamera();
  }  

  return (
    <div className="App">
      <div style={{ marginTop: '40px', border: 'solid 1px black', padding: '10px' }}>
        <div>
          <img 
            src={lastPhotoPath} 
            alt="last img taken"
            style={{ 
              border: 'solid 1px red', 
              marginLeft: 'auto', 
              marginRight: 'auto', 
              maxWidth: '200px', 
              height: '300px' 
            }} />
        </div>
        <div>
          <button 
            onClick={onClickCamera} 
            style={{ 
              width: '10em', 
            }}>Camera</button>
        </div>
      </div>
      <div style={{ marginTop: '20px'}}>
        <strong>My Pics</strong>
        {allImages}
      </div>
    </div>
  );
}

export default App;