Trying to save data from 3rd party api to collection

help
1

I’m using the CockTailDB to get drinks to save to my collection. This is my component.

import { withTracker } from 'meteor/react-meteor-data';
import Drinks from '../api/drinks';

class RandomDrink extends Component {
  state = {
    randomCocktail: []
  };

  async componentDidMount() {
    try {
      const res = await fetch(
        'https://www.thecocktaildb.com/api/json/v1/1/random.php'
      );
      const randomCocktail = await res.json();
      this.setState({
        randomCocktail: randomCocktail.drinks
      });
    } catch (e) {
      console.log(e);
    }
  }

  addDrink = (cocktail) => {
    Drinks.insert({
      name: cocktail.strDrink,
      instructions: cocktail.strInstructions,
      image: cocktail.strDrinkThumb
    });
  };

  render() {
    return (
      <div>
        <h1>Cocktail</h1>
        {this.state.randomCocktail.map((cocktail) => {
          return (
            <div key={cocktail.idDrink}>
              <h1>{cocktail.strDrink}</h1>
              {cocktail.strInstructions}
              <img src={cocktail.strDrinkThumb} alt="" />
              <button onClick={this.addDrink}>Add Drink</button>
            </div>
          );
        })}
      </div>
    );
  }
}

export default withTracker(() => {
  // Meteor.subscribe('randomDrink');
  return {
    drinks: Drinks.find({}).fetch()
  };
})(RandomDrink);

When I go Add, I just get a new collection but with a new ID. Should I use axios.post(‘api/drinks’) How will I get the name image and instruction to save to my collection?

Thanks