i want, if user select a option then it will show its data in a label in react.js

Question

i set a tag in form and i make a fetch api for get all projects data in the select tag for selecting a project and storing its id to mysql its working good.

*This project data i am getting in fetch api. This is my console.log

budget: 11999
coordinatorName: "122"
date: "2022-02-25T05:09:12.000Z"
description: "for raise money"
endDate: "2022-05-25"
id: 19
pic: "https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg"
projectName: "money"
remaining: 5770
startDate: "2022-02-25"

**Now problem is i want if user select any project then after selection it will shows then 'remaining' field data of selected project in label.

*This is my form.js :-

 import React, { useEffect, useState } from 'react';
import { Route, Routes, useNavigate } from "react-router-dom";
import axios from "axios";
import MyProjectsList from './MyProjectsList';
import { useSelector } from "react-redux";

export default function DonorForm ({showForm, setShowForm})  {


  const [projectId, setprojectId] = useState();

  const userState = useSelector(state=> state.loginUserReducer)
  const {currentUser} =userState;

  const coordinatorId = currentUser.id;

  let navigate = useNavigate();

  const [donors, setDonors] = useState({
    name: "", 
    mobileNo: "", 
    amount: "", 
    project: "", 
    projectBudget:"",
    donateDate: "",
  });
 
  let name, value;
  const handleInputs = (e) => {
    console.log(e);
    name = e.target.name;
    value = e.target.value;
   
    setDonors({...donors, [name]: value });
  };

  const onclick = async (e) => {

    const { name, mobileNo, amount, project, projectBudget, donateDate } =
    donors;

  
    try {
     
        const config = {
          header: {
            "Content type": "appication/json",
          },
        };

        const { data } = await axios.post(
          "http://localhost:4000/donorsform",
          {
            name, 
            mobileNo, 
            amount, 
            project, 
            projectBudget,
            donateDate
          },
          config
        );

        console.log(data);
        localStorage.setItem("donorsInfo", JSON.stringify(data));
        navigate("/coordinators/myprojects");
        
    } catch (error) {
      setRemainigError(true)
      setError(true);
      setLoading(false);
    }
  };
  
  useEffect(() => {
    //to get coordinators's projects name only in projects column.?
    axios.post("http://localhost:4000/coordinatorsProjects",
    {
      coordinatorId : coordinatorId
     }).then((res) => {
      console.log(res.data,"hello this is projectid");
      setprojectId(res.data);
    });
  }, [coordinatorId]);

  return(
    <>
        <section>
          <div className="container">
              <div className="signup-form">
                <div className="card-secondary shadow">
                  <div className="card-header ">
                    <h3 className="card-title my-1">Donor Details</h3>
                  </div>
                  <form 
                    onSubmit={handleSubmit(onclick)}
                    method="POST"
                    className="form-horizontal "
                    id="register-form"
                  >
                    <div className="card-body">

                      <div className="row">
                        


                      <div className="form-group col">
                          <label
                            className="form-label col"
                            htmlFor="validationServer01"
                          >
                            Projects
                          </label>
                        <select 
                          type="select"
                          className="form-control"
                          id="project"
                          name="project"
                          onChange={handleInputs}
                          >
                            <option value="">Select Project</option>
                            {projectId &&
                              projectId.map((project) => (
                                <option value={project.id}>
                                  {project.projectName}
                                </option>
                               
                              ))}
                          </select>
                       
                          //***Here i want to display 'remaining' after select project.
                          <h6>Peroject Remaining:- </h6>
                        </div>

                      </div>
                    </div>
                    <div className="card-footer">
                      <button type="submit" className="btn-hover-1 color-3">
                        Submit
                      </button>
                    </div>
                  </form>
                </div>
              </div>
          
          </div>
        </section>
        
    </>
  );
};

*I already INSERT the 'remaining' amount from beckend and it stored in database properly.

          "INSERT INTO donor_table (name, mobileNo, amount, project, projectBudget, donateDate) VALUE(?,?,?,?,?,?)";
        db.query(
          insert, [name, mobileNo, amount, project, Result[0].remaining, donateDate], (err, result) => {
             console.log(err)
          }
        );

help me, thank you!