Map the input filed value using axios get request

[ayush12]

I am fetching the value from the database and then data I am mapping into an input text field using material UI before that I am matching the URL using params and then according I am updated the state of the input field but I am not getting the updated data after mapping in the input field. So in last, I am trying to map the axis get request value in input so I have mapped with every value using map but the problem is I have to first match the URL with URL params value and after that, I have to fetch the data and mapped the input.

import { BASE_URL } from "../config";
import { useLocation, useHistory } from "react-router-dom";
const apiEndpoint = `${BASE_URL}/getAllForm`;
const Form = () => {
  const [sale, setSale] = useState("");
  const [district, setDistrict] = useState("");
 const [form, setForm] = useState([]);
  const history = useHistory();

  const handleSubmit = () => {
    // console.log("triggered");
    axios
      .post(apiEndpoint, {
        sale,
        district,


      })
      .then(() => { });
    setSale("");
    setDistrict("");

  };

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(apiEndpoint);

      setForm(result.data);
    };
    fetchData();

    // setSale(form.sales_office_desc);
    // setDistrict(form.sales_district_desc);

  }, []);


  const classes = useStyles();
  return (
    <div>
      <Grid container direction="column" alignItems="center" justify="center">
       
            <form
              className={classes.form}
              noValidate
              onSubmit={(e) => {
                e.preventDefault();
                e.target.reset();
              }}
            >
              {form.map((p, index) => {
                return (


                  <Grid container spacing={4}>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        key={index}
                        type="text"
                        variant="outlined"
                        fullWidth
                        label="Sales office"
                        onChange={(event) => {
                          setSale(event.target.value);
                        }}
                        value={p.sales_office_desc}
                      />
                    </Grid>

                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="text"
                        fullWidth
                        label="Sales district"
                        onChange={(event) => {
                          setDistrict(event.target.value);
                        }}
                        value={p.sales_district_desc}
                      />
                    </Grid>
                   
                    )
                  })}

                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      className={classes.submit}
                      onClick={() => handleSubmit()}
                    >
                      Submit
                  </Button>
                    <Grid container justify="flex-end">
                     
            </form>
              
        </Grid>
     </div>
   
  );
};

export default Form;