React - How can I get the values from my multiple input and send them to my input?

Question

I'm using <autocomplete> as input field, I'm trying to log the values in my console to see if my submit method is working. Currently, I'm not able to submit anything, only empty data to my axios instance and not getting any Traceback errors to work with. My backend works fine, just struggling to send over the data from my form.

And I'm only trying send over the symbol from inputted values field to my backend,

const inputOptions = [
  { symbol: "ACN", company: "Accenture Plc", sector: "Technology Services"}
];

Check out my reproducible code:

https://codesandbox.io/s/dazzling-lake-jvdyf?file=/src/App.js {Without the axios instance}

Form:

      <div className={classes.container}>
        <Grid>
            <form noValidate  onSubmit = { handleSubmit(onSubmit) }>
              <Controller
              render={({ onChange ,...props }) => (
                <Autocomplete
                    {...props}
                    className={classes.inputBar}
                    id="stock_list"
                    name="stock_list"
                    multiple
                    options={inputOptions.companies}
                    filterOptions={filterOptions}
                    filterSelectedOptions
                    defaultValue={[]}
                    onChange={(e, data) => onChange(data)}
                    getOptionLabel={(option) => option.symbol}
                    getOptionSelected={(option, value) => option.symbol === value.symbol}
                    renderOption={(option) =>
                    {
                      return (
                        <>
                          <span style={{ fontWeight: 500, fontSize: "20px", paddingRight: "1rem" }}>{option.symbol}</span><span style={{ color: "#C6C6C6", fontSize: "24px" }}> | </span><span style={{ paddingLeft: "1rem" }}>{option.company}</span>
                        </>
                      )
                    }}
                    renderInput={(params) => (
                      <TextField 
                        {...params}
                        style={{ alignItems: 'center' }}
                        id="stock_list"
                        name="stock_list"
                        variant="outlined"
                        label="Companies"
                        className={classes.inputBar}
                      />
                       )}
                      />
                    )}
                    name="stock_list"
                    control={control}
                    defaultValue={[]}
                    onChange={([, data]) => data}
            />
            <Button 
              variant="contained" 
              color="primary"
              onClick={handleSubmit}
            >
              Add Stocks
            </Button>
            </form> 
        </Grid>
          </div>

I need to send the symbol values from the multi-input form above to my axios instance.

It's been proven difficult to do so with a react-hook-form and Material UI.

EDIT: I'm trying to extract the values from the input field, thanks to the comments I'm able to log to see what values of JSON are selected, but the form is not properly linked yet for submitting data as it seems im sending over an empty dictionary to my backend.

Here is my axios instance.

  const onSubmit = (data, e) =>
  {  
    console.log(data);

    axiosInstance
      .patch(url+ slug + '/', {
        stock_list: data.symbol,
      })
      .then((res) =>
      {
        console.log(res);
        console.log(res.data);
      });
  };

Answer 1

Add type="submit" to the submit button and remove the onClick , these changes will make the form submit function to be triggered when Add Stocks button is clicked

<Button variant="contained" color="primary" type="submit">
      Add Stocks
 </Button>

Answer 2

I have modified the reproducible code and comes up with this.

https://codesandbox.io/s/wispy-firefly-n0ygq?file=/src/App.js

you can access the selected symbols in your submit method now.