I have a page in which I load an input component dynamically with a button click, the input component is a custom search bar which displays a hint when the user inputs the search input. The hint is working but i cant get the onclick function to update the input text so as to convert it to an array of string.

import React, { useCallback } from "react";
import { Col, Form } from "react-bootstrap";
const FormComponent = (props) => {
  const arrhandler = useCallback(
    (value) => {
      props.setValue(value);
      props.setResult([]);
    },
    [props.setValue]
  );
  return (
    <Col xs={12} sm={12} md={12} lg={4}>
      <Form.Group className="mb-3">
        <Form.Label>DEPARTURE</Form.Label>
        <Form.Control
          type="text"
          value={props.value}
          onChange={props.handler}
        />
      </Form.Group>
      {props.arr &&
        props.arr.map((port, i) => (
          <div key={i} onClick={() => arrhandler(val.name)}>
            {val.name}
          </div>
        ))}
    </Col>
  );
};
export default FormComponent;

This is my form component

In the parent component i have

import React, { useEffect, useState } from "react";
import { Container, Button } from "react-bootstrap";
import axios from "axios";

const ParentComponent = () => {
  const [forms, setForms] = useState([]);
  const [value, setValue] = useState("");
  const [result, setResult] = useState([]);

  useEffect(() => {
    axios.post(`/api/search/${value}`).then((res) => setResult(res.data));
  }, [value]);

  const newForm = (e) => {
    setForms(forms.concat(<FormComponent key={forms.length} />));
  };

  return (
    <Container>
      <Button
        className="col-lg-5 col-sm-12 mb-2"
        variant="outline-secondary"
        size="lg"
        onClick={newForm}
      >
        Add New Search
      </Button>
      {form.length > 0
        ? forms.map((form) => (
            <FormComponent
              value={form.value}
              handler={(e) => setValue(e.target.value)}
              arr={result}
              setValue={setValue}
              setResult={setResult}
            />
          ))
        : ""}
    </Container>
  );
};

I cant seem to figure out how to update the input field with the onclick function, so that i can store the result in an array.