button keeps duplicating when selecting a different option

I am trying to implement a paypal button.

I got my reference here: https://fireship.io/lessons/paypal-checkout-frontend/

However, every time I change my select, my paypal button keeps duplicating.

How do i fix this?

setValueType(event){
        this.setState({buy_cash_type: event});
    }

<div className="add_cash_page">
  <select id="add_cash_type" className="add_cash_type" onChange={e => this.setValueType(e.target.value)}>
   <option value="5">$5 CAD 5,000</option>
    <option value="10">$10 CAD 10,000</option>
   <option value="20">$20 CAD 20,000</option>
   </select>
  <div>
 <Paypal product={{price:this.state.buy_cash_type}}/>
      </div>
 </div>

Paypal.js

function Paypal({ product }){
    const [paidFor, setPaidFor] = useState(false);
    const [err, setError] = useState(false);

    const paypalRef = useRef();

    useEffect(() => {
        window.paypal.
        Buttons({
            createOrder: (data, actions) => {
              return actions.order.create({
                purchase_units: [
                  {
                    description: "hi",
                    amount: {
                      currency_code: 'USD',
                      value: product.price,
                    },
                  },
                ],
              });
            },
            onApprove: async (data, actions) => {
              const order = await actions.order.capture();
              setPaidFor(true);
              console.log(order);
            },
            onError: err => {
              setError(err);
              console.error(err);
            },
          })
          .render(paypalRef.current);
      }, [product.price]
      );



    return (
        <div>
            <div id="paypal_btn" className="paypal_btn">
                <div ref={paypalRef} />
            </div>
        </div>
    )
}
export default Paypal;

Not too sure how I can fix this.

Thank you!