Second revision of App for tutorial: https://ethanbon.com/blog/uploading-user-cropped-profile-images-to-digital-ocean-spaces#crop

App.js

import React, { useState } from 'react';
import CropModal from './CropModal';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [imageBase64, setImageBase64] = useState(null);

  // Placeholder, will fetch url from Database when setup
  const profilePictureUrl = "https://placehold.it/200x200"

  const toggleModal = () => {
    setIsOpen(!isOpen)
  };

  const handleChange = (evt) => {
    const file = evt.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      setImageBase64(reader.result)
      toggleModal();
    }

    reader.onerror = (err) => {
      console.error(err)
    }
  };

  return (
    <div className="App">
      <CropModal
        isOpen={isOpen}
        onClose={toggleModal}
        imageString={imageBase64}
      />
// other jsx here
...