I am studying MERN and my tutor has given me an assignment:
Store image given by user in the ‘public’ folder without the use of backend or database, just react.
I have:

import { useEffect, useState } from "react";

export default function App() {
  const [image, setImage] = useState(null);
  const [file, setFile] = useState(null);

  useEffect(() => {
    if (file) {
      var src = URL.createObjectURL(file[0]);
      setImage(
        <img src={src} />
      );
    }
  }, [file])

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e.target.files)} />
      { image }
    </div>
  );
}

I can’t seem to figure out the way to store the image the way my tutor wants me to do it.