How to let user choose from sample of images displayed on screen along with option to upload from device?

Question

  const [selectedFile, setSelectedFile] = useState(null);
  const [preview, setPreview] = useState(null);
  const [predictions, setPredictions] = useState([]);



  const handleSubmit = async (event) => {
    document.getElementById("loadingDiv").style.display = "";
    event.preventDefault();
    const formData = new FormData();
    formData.append("file", selectedFile);
    try {
      const response = await axios({
        method: "post",
        url: "https://someapi/predict",
        data: formData,
        headers: {
          Accept: "application/json",
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        //handle success
        document.getElementById("loadingDiv").style.display = "none";
        // console.log(response.data.predictions);
        setPredictions(response.data.predictions);
        // console.log(response.data.encoded_img)
        let out_img = "data:image/png;base64," + response.data.encoded_img;
        setPreview(out_img);
        document.getElementById("PredictionBox").style.display = "";
      });
    } catch (error) {
      console.log(error);
      document.getElementById("loadingDiv").style.display = "none";
      document.getElementById("uploadPreview").style.display = "none";
      document.getElementById("uploadButton").style.display = "none";
      document.getElementById("PredictionBox").style.display = "none";
      document.getElementById("uploadView").style.display = "";
      alert("cant Reach Server !");
    }
  };

  const handleFileSelect = (event) => {
    if (!event.target.files || event.target.files.length === 0) {
      setSelectedFile(undefined);
      document.getElementById("uploadPreview").style.display = "none";
      document.getElementById("uploadButton").style.display = "none";
      document.getElementById("PredictionBox").style.display = "none";
      document.getElementById("uploadView").style.display = "";
      return;
    }
    document.getElementById("PredictionBox").style.display = "none";
    setSelectedFile(event.target.files[0]);
  };

  useEffect(() => {
    if (!selectedFile) {
      setPreview(undefined);
      return;
    }
    const objectUrl = URL.createObjectURL(selectedFile);
    console.log(objectUrl);
    setPreview(objectUrl);
    document.getElementById("uploadView").style.display = "none";
    document.getElementById("uploadPreview").style.display = "block";
    document.getElementById("uploadButton").style.display = "block";

    return () => URL.revokeObjectURL(objectUrl);
  }, [selectedFile]);

   <>
      <div className="row  align-items-center  justify-content-center">
        <div>
          <h1 className="fw-bold  text-light text-center">Smart Manual</h1>
        </div>
        <div className="FadeInUp container p-lg-5">
          <div className="row border align-items-center   justify-content-center ">
            <div className="d-flex justify-content-center align-items-center upload-box green-gradient m-3 ">
              <div
                id="uploadView"
                className="row justify-content-center align-items-center"
              >
                <div id="box" className="bg-light p-3">
                  <img id="image" src={uploadImg} width="100%" height="100%" />
                  <input type="file" id="file"  value="" onChange={handleFileSelect} />
                </div>
                <h4 className="text-center">
                  Upload photo or choose from examples
                </h4>
              </div>
              <div
                id="uploadPreview"
                className="text-center "
                style={{
                  display: "none",
                  maxHeight: "350px",
                  maxWidth: "350px",
                }}
              >
                <img
                  className="img-fluid"
                  src={preview}
                  style={{
                    maxHeight: "350px",
                    maxWidth: "350px",
                    borderRadius: "1.5rem",
                    boxShadow: "4px 8px 16px 0 rgba(0, 0, 0, 0.5)",
                  }}
                />
                <input type="file" id="file" onChange={handleFileSelect} />
              </div>
              <span
                id="loadingDiv"
                className="spinner"
                style={{ display: "none", position: "absolute" }}
              >
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </span>
            </div>
            <div className="border text-center">
              <img
                className="img-fluid m-3"
                src={sample1}
                style={{
                  maxHeight: "100px",
                  maxWidth: "100px",
                  borderRadius: "5px",
                }}
                onClick = {selectSample}
              />
              <img
                className="img-fluid m-3"
                src={sample2}
                style={{
                  maxHeight: "100px",
                  maxWidth: "100px",
                  borderRadius: "5px",
                }}
              />
              <img
                className="img-fluid m-3"
                src={sample3}
                style={{
                  maxHeight: "100px",
                  maxWidth: "100px",
                  borderRadius: "5px",
                }}
              />
            </div>

            <div
              id="PredictionBox"
              className="col-lg-6 col-sm-12 col-xs-12 p-lg-3"
              style={{ display: "none" }}
            >
              <ManualResults predictions={predictions} />
            </div>
          </div>

          <div className="row align-items-center justify-content-center p-3">
            <button
              id="uploadButton"
              className="btn purple-gradient btn-lg text-light"
              onClick={handleSubmit}
              style={{ display: "none", maxWidth: "200px" }}
            >
              Predict
            </button>
          </div>
        </div>
      </div>
    </>

I am creating an image upload page in react where I have put an Input field to upload an Image file. I am also showing the preview of the Image user selects to upload. Now I want to add a functionality to let user choose from a sample of 3-4 images displayed below the upload button. How do I make user to click on any one of the sample image and make it as selected image for upload?