React-select value not showing in searchParams or the request

Question

I'm new to react so please excuse if this is a silly doubt..

I'm trying to implement react-select in my form, but the selected option is not showing up in my url as a selectParam.

I want to access the selected company's company_id from the url from SearchPage, but it doesn't seem to work.

I've been trying this for a while now, but it doesn't seem to work.

import { Form } from "react-router-dom";
import Button from "./Button";
import Select from "react-select";
import { useState } from "react";

function SearchEmployee({ companyList, action, method }) {
  const [selectedOption, setSelectedOption] = useState("none");

  let companyOptions = companyList.map((company) => ({
    value: company.company_id,
    label: company.brand_name,
  }));

  const handleSelect = (e) => {
    setSelectedOption(e.value);
  };

  // console.log(companyOptions);

  return (
    <>
      <div className="container">
        {/* {console.log(companyList)} */}
        {companyList ? (
          <Form method={method} action={`/${action}`}>
            <div className="container row mt-2 mb-2">
              <label htmlFor="companyId" className="col-4">
                Company Name
              </label>
              <div className="container-fluid col-8 p-0">
                
                <Select
                  options={companyOptions}
                  placeholder="Select Company"
                  onChange={handleSelect}
                  value={companyOptions.find(function (option) {
                    return option.value === selectedOption;
                  })}
                  isSearchable={true}
                />
                
              </div>
            </div>
            <div className="container row">
              <label htmlFor="employeeId" className="col-4">
                Employee ID
              </label>
              <div className="container-fluid col-8 p-0">
                <input
                  type="text"
                  placeholder="Employee ID"
                  className="form-control"
                  name="employeeId"
                />
              </div>
            </div>
            <Button type="submit" label="Search" btnCSS="m-auto" />
          </Form>
        ) : (
          <div className="text-center">Database Empty</div>
        )}
      </div>
    </>
  );
}

export default SearchEmployee;

This is the SearchPage, where I am trying to access the company_id and employee_id

import Button from "../components/Button";
import { Form, useLoaderData } from "react-router-dom";
import EmployeeDetails from "../components/EmployeeDetails";
import { getCompanyList } from "../api/companyApi";
import { getEmployeeData } from "../api/employeeApi";
import SearchEmployee from "../components/SearchEmployee";
import downloadReport from "../utils/dowloadReport";

export async function action({ request }) {
  const formData = await request.formData();
  const payment_id = formData.get("payment_id");
  const url = new URL(request.url);
  const company_id = url.searchParams.get("companyId");
  console.log(url);
  // console.log(company_id);
  const employee_id = url.searchParams.get("employeeId");
  // console.log(employee_id);
  const employeeData = await getEmployeeData(company_id, employee_id);
...
  return {};
}

export default function SearchPage() {
  const [companyList, employeeData] = useLoaderData();
  return (
    <>
      <h1 className="text-center fs-1 fw-bold">Search Records</h1>
      <div className="container w-50 border rounded p-4 mt-4">
        <SearchEmployee
          companyList={companyList}
          action={"search"}
          method={"get"}
        />
        <EmployeeDetails employeeData={employeeData} />
      </div>
      ...
    </>
  );
}

export async function loader({ request }) {
  const companyList = await getCompanyList();
  const url = new URL(request.url);
  const company_id = url.searchParams.get("companyId");
  const employee_id = url.searchParams.get("employeeId");
  let employeeData;
  if (company_id && employee_id) {
    employeeData = await getEmployeeData(company_id, employee_id);
  }
  return [companyList, employeeData];
}