How can i display name of uploaded file on navbar?

I have a problem with displaying name of the uploaded file on navbar. When i select file i want to upload in file browser/selector, i want my app to display it’s name on navbar.(Navbar is a separated component, but displayed on every page i have). Here is my code:

FileUploader:

import React from "react";
import { useDropzone } from "react-dropzone";
import Upload from "./pictures/fileUpload.png";

function Uploading(props) {
  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
    noDrag: true,
  });
  const files = acceptedFiles.map((file) => (
    <li key={file.path}>{file.name}</li>
  ));

  return (
    <section className="container w-full h-full text-center">
      <div {...getRootProps({ className: "dropzone h-full" })}>
        <input {...getInputProps()} />
        <img
          src={Upload}
          className="mx-auto cursor-pointer "
          alt=""
          id="picture"
        />
        <label class="text-2xl">Choose Document</label>
      </div>

    {/* This part of the code displays name of uploaded files in a list. */}
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
      {/* End of displaying name code. */}
    </section>
  );
}

export default Uploading;

and Navbar:

import React from "react";
import Loaded from "../assets/loaded.png";

function Navbar() {
  return (
    // ->-> Absolute keeps navbar on one place, navbar doesn't follow the page with the mouse scrolling. <-<- //
    <div className="shadow-md w-full absolute">
      <div className="flex justify-end h-full w-full bg-white py-5 border-2 border-b-black">
        <div class="mr-5">
          <ul className="sm:w-fit md:w-fit lg:w-fit">
            <li className="text-xl">
              <img src={Loaded} className="h-8 w-8  cursor-pointer" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Navbar;