I want to pass an image as a prop to another page

  javascript, react-hooks, react-router, reactjs

The main problem is that this image is selected from the file explorer and I am using react-router.
this is where you select the image

import { Link } from "react-router-dom";
import About from "./About";
import './styles/modal.css'
import firebase from "firebase";

export default function Add(props) {
    const [image, setImage] = useState(null);
    const [modal, setModal] = useState(false);

    const pickImage = (event) => {
    const toggle = () => {

    return (
            <button onClick={toggle}>Add image</button>
            {modal ? (
                <div className="modal-bg">
                    <div className="modal">
                        <img src={image} style={{ width: '60%', height: '60%' }} className="ex-img" />
                        <br /><br />
                        <label htmlFor="fie" className="gcoo btn-default">+ File
                            <input id="fie" type="file" onChange={pickImage} className="file-pick" />
                        <br />
                        <br />
                        <div className="bottom-buttons">
                            <Link to="/about">
                                <button className="save">Save</button>
                            <button onClick={() => setModal(false)} className="closse">Close</button>
            ) : null}

I am using firebase but not in this file so you can ignore this.
this is where all the routes and pages are.

import { Route } from "react-router";
import { Switch } from 'react-router-dom';

import ImageDisplay from "./components/ImageDisplay";
import Add from './components/Add';

export default function MainRoute(props) {
    return (
            <Route exact path="/about" component={() => <ImageDisplay />} />
            <Route exact path="/add" component={() => <Add />} /> 

finally this file ImageDisplay.js is where the image should be displayed
I dont have much on this file because i dont know how to put in any images.
I have tried props but whenever i imported the Imagedisplay it always showed the content on it and i dont want anything from image display. I only want to send an image over there.

import React from 'react'
import { Link } from "react-router-dom"

function ImageDisplay(props) {
    return (
                <img />
export default ImageDisplay;

Source: Ask Javascript Questions