How to create a common search functionality that can be used in different files

The below code has search bar and searched tech cards and searched drop down in same file. How to form three separate files , one for search UI and functionality (doesn't return anything) and second only displaying searched tech cards and third displaying drop down after searching. Remember the props in given code should be retained but idk how to use them while displaying cards and drop-down in different components.

import React, { useState, useEffect } from "react";
import { Form } from "react-bootstrap";
import { authPost, authGet } from "../../api/api";
import { inputFieldsLength } from "../../globals/applicationConstants";
import TechnologyCard from "../../components/cards/TechnologyCard";
import {
  BasePath,
  GetAllGigWorkersPA,
  GetRolesByType,
} from "../../globals/serviceURLs";
import { log } from "../../globals/log";
import { getAccessToken } from "../../globals/localStorage";
const SearchTechnology = ({
  filter,
  setFilter,
  label,
  data,
  handleClick,
  selected,
  techCardNeeded,
  role,
  setRole,
  setRoleList,
  setRoles,
  setTechError,
  technologyTyped,
  setTechnologyTyped,
}) => {
  const [technologySuggestions, setTechnologySuggestions] = useState([]);
  const [techTyped, setTechTyped] = useState("");
  const token = getAccessToken();

  useEffect(() => {
    getRoles(filter.technology);
  }, []);

  const autosuggest = () => {
    return (
      <div className="suggestion-tech">
        {technologySuggestions.map((item, index) => (
          <div
            className={techCardNeeded == "true" ? "" : "suggestion-tech-item"}
            key={index}
            onClick={() => handleTechnologySelected(item)}>
            {techCardNeeded == "true" ? null : item.nme}
          </div>
        ))}
      </div>
    );
  };

  const handleTechnologySelected = (technology) => {
    filter.technology = technology;
    setFilter(filter);
    setTechError("");
    setTechnologySuggestions([]);
    setTechnologyTyped
      ? setTechnologyTyped(filter.technology.nme)
      : setTechTyped(filter.technology.nme);
    getRoles(filter.technology);
  };

  const handleTechnologyChange = (technologyStringTyped) => {
    setTechnologyTyped
      ? setTechnologyTyped(technologyStringTyped)
      : setTechTyped(technologyStringTyped);
    technologyStringTyped = technologyStringTyped.trim();

    if (technologyStringTyped.length >= 3) {
      const path = `/tech/srch`;
      const config = {
        cont: technologyStringTyped,
        count: inputFieldsLength.SearchResultsCount,
      };
      authGet(BasePath, path, config, token)
        .then((res) => {
          if (res.length === 0) {
            setTechnologySuggestions([]);
          } else if (res.length > 0) {
            setTechnologySuggestions(res);
          }
        })
        .catch(() => {});
    } else if (
      technologyStringTyped.length < inputFieldsLength.SearchStringMinLength
    ) {
      setTechnologySuggestions([]);
    }
  };

  const getRoles = (primaryTech) => {
    let roleTypeArray = [];
    roleTypeArray = [
      ...roleTypeArray,
      filter.technology ? filter.technology.rtyp : undefined,
    ];
    roleTypeArray = roleTypeArray.filter(function (el) {
      return el != null;
    });

    const typ = new Set(roleTypeArray);

    const config = {
      caid: 2,
      typ: Array.from(typ),
      psz: 100,
      pno: 0,
    };
    authGet(BasePath, GetRolesByType, config, token)
      .then((res) => {
        setRoles(res.lst);
        setRolesByType(primaryTech ? primaryTech.rtyp : undefined, res.lst);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const setRolesByType = (roleType, roles) => {
    let newRoles = roles.filter((i) => i.typ === roleType);
    if (newRoles.length === 0) {
      newRoles = roles;
    }

    setRoleList(newRoles);
    if (roleType && role) {
      for (let i in roles) {
        if (roles[i].rid === role.rid) {
          setRole(role);
          break;
        }
      }
    }
  };

  const form = () => {
    return (
      <Form.Group controlId="technology">
        {label !== "" ? (
          <Form.Label>
            <b>Technology</b>
          </Form.Label>
        ) : (
          ""
        )}
        <Form.Control
          onChange={(e) => handleTechnologyChange(e.target.value)}
          value={technologyTyped ? technologyTyped : techTyped}
          type="text"
          placeholder="Search for any technology"
          className="technology-input"
        />
        {autosuggest()}
      </Form.Group>
    );
  };

  return (
    <>
      {techCardNeeded === "true" ? (
        technologyTyped === "" || techTyped === "" ? (
          <>
            {form()}
            <div className="jb-list">
              {data.map((item) => {
                return (
                  <TechnologyCard
                    technology={item}
                    selected={selected(item)}
                    onClick={handleClick}
                  />
                );
              })}
            </div>
          </>
        ) : (
          <>
            {form()}
            <div className="jb-list">
              {technologySuggestions.map((item) => {
                return (
                  <TechnologyCard
                    technology={item}
                    selected={selected(item)}
                    onClick={handleClick}
                  />
                );
              })}
            </div>
          </>
        )
      ) : (
        <>{form()}</>
      )}
    </>
  );
};

export default SearchTechnology;