How to rerender value of child from HOC - reactjs

Question

I want to have a button submiting to stripe a specific quantity, based on an input that can be changed by typing or clicking an increment/decrease button. I have the increment/decrease functions on an higher order component but i am unable to submit it to the button of stripe (child from my understanding)
Relevant code below:
withCheckout (HOC):
import React from "react"
const UpdatedComponent = (OriginalComponent) => {
class NewComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
this.handleChange = this.handleChange.bind(this)
}
increment = () => {
this.setState(prevState => {
return { count: prevState.count + 1}
})
}
decrease = () => {
this.setState(prevState => {
return { count: prevState.count - 1 }
})
}
handleChange(event) {
this.setState({
count: parseInt(event.target.value)
});
}
render() {
return <OriginalComponent count={this.state.count} increment={this.increment} decrease={this.decrease} handleChange={this.handleChange} />
}
}
return NewComponent
}
export default UpdatedComponent
Checkout:
import React, { useState } from "react"
import { loadStripe } from "#stripe/stripe-js"
import UpdatedComponent from "./withCheckout"
const buttonStyles = {
fontSize: "13px",
textAlign: "center",
color: "#000",
padding: "12px 60px",
boxShadow: "2px 5px 10px rgba(0,0,0,.1)",
backgroundColor: "rgb(255, 178, 56)",
borderRadius: "6px",
letterSpacing: "0.2ch",
display: "block",
margin: "1.5em auto 1.5em auto",
}
const buttonDisabledStyles = {
opacity: "0.5",
cursor: "not-allowed",
}
let stripePromise
const getStripe = () => {
if (!stripePromise) {
stripePromise = loadStripe("KEY_HERE")
}
return stripePromise
}
const Checkout = props => {
const [loading, setLoading] = useState(false)
const redirectToCheckout = async event => {
event.preventDefault()
setLoading(true)
const stripe = await getStripe()
const { error } = await stripe.redirectToCheckout({
mode: "payment",
lineItems: [{ price: "PRICE_ID_HERE", quantity: props.count }],
successUrl: `http://localhost:8000/page-2/`,
cancelUrl: `http://localhost:8000/`,
shippingAddressCollection: {
allowedCountries: ['PT'],
}
})
if (error) {
console.warn("Error:", error)
setLoading(false)
}
}
return (
<button
disabled={loading}
style={
loading ? { ...buttonStyles, ...buttonDisabledStyles } : buttonStyles
}
onClick={redirectToCheckout}
>
Comprar {props.count}
</button>
)
}
export default UpdatedComponent(Checkout)
Example:
See this image
When I change the input to 7, I expect the button text to be "Comprar 7" and I expect to submit quantity: 7 in the striperedirect function. I think the problem has to do with the way props are set, as my Counter is working well the props were passed as const {count} = this.props. Should I add the Counter.js code as well?