I am new to react and js. Is there any way that I can upload an image and move the draggable text on top of that image and when I click download the image along with the download get saved?? Any help is much appreciated.

My App.js

import './App.css';
import Land from './Land';
import React from 'react';
import Draggable from 'react-draggable';
import { saveAs } from 'file-saver'


function App() {

  const [file, setFile] = React.useState();
  function handleChange(e) {
      console.log(e.target.files);
      setFile(URL.createObjectURL(e.target.files[0]));
  }

    const downloadImage = () => {
      saveAs(file, 'image.jpg') // Put your image url here.
    }



  return (
      <div className="App">
          <h2>Add Image:</h2>
          <input type="file" onChange={handleChange} />

          
          <div className='img-container'>

           <Land/>
          <img src={file} width ="100%"/>

          <button onClick={downloadImage}>Download!</button>
          </div>

      </div>

  );

}

export default App;

My Land.js

import React from 'react';
import Navbar from './Navbar';
import Hero from './Hero';
import pic from './me.png'

import Draggable from 'react-draggable';
export default function Land()
{
    return(
        <div>
            
            <Draggable>
      <div>I can now be moved around!</div>
    </Draggable>
        </div>
    )
}

Screenshot of landing page