How to use command pattern in react calculator app

I have a calculator app and I'm trying to apply the command pattern

I have a fully working version

Please help me figure out how I should do

How do I use the command pattern in my code?

Calculator.jsx

export const Calculator = () => {
  const [history, setHistory] = useState([])
  const [formula, setFormula] = useState([])
  const [input, setInput] = useState('')
  const [result, setResult] = useState('')

  const handleDigit = number => {
    setInput(input + number)
    setFormula(formula => [...formula, input])
  }

  const handleClear = () => {
    setInput('')
    setFormula([])
    setResult('')
  }

  const handleDelete = () => {
    setInput(input.slice(0, -1))
  }

  const handleToggleSign = () => {
    setInput(input.charAt(0) === '-' ? input.slice(1) : '-' + input)
  }

  const handleOperator = operator => {
    setInput(input + operator)
  }

  const handleDecimalPoint = () => {
    if (!input.includes('.')) {
      setInput(input + '.')
    }
  }

  const handleEqual = () => {
    setResult(eval(input))
    setHistory(history => [...history, { input, result }])
    setInput('')
  }

  return (
    <Fragment>
      <MainContainer>
        <LeftSide>
  
          <Display
            result={result}
            input={input}
            formula={formula}/>
          <Keypad
            onDigit={handleDigit}
            onClear={handleClear}
            onDelete={handleDelete}
            onToggleSign={handleToggleSign}
            onOperator={handleOperator}
            onDecimalPoint={handleDecimalPoint}
            onEqual={handleEqual}
          />
        </LeftSide>
      </MainContainer>
    </Fragment>
  )
}

Keypad.jsx

export const Keypad = props => {
  const handleOnDigit = e => {
    props.onDigit(e.target.value)
  }

  const handleOnOperator = e => {
    props.onOperator(e.target.value)
  }

  return (
    <KeypadContainer>
      <KeypadRow>
        <FunctionsButton value="clearAll"onClick={props.onClear}>AC</FunctionsButton>
        <FunctionsButton value="clear"onClick={props.onDelete}>C</FunctionsButton>
        <FunctionsButton value="sign" onClick={props.onToggleSign}>+/-</FunctionsButton>
        <FunctionsButton value="/" onClick={handleOnOperator}>÷</FunctionsButton>
      </KeypadRow>
      <KeypadRow>
        <KeypadButton value={7} onClick={handleOnDigit}>7</KeypadButton>
        <KeypadButton value={8} onClick={handleOnDigit}>8</KeypadButton>
        <KeypadButton value={9} onClick={handleOnDigit}>9</KeypadButton>
        <FunctionsButton value="*" onClick={handleOnOperator}>x</FunctionsButton>
      </KeypadRow>
      <KeypadRow>
        <KeypadButton value={4} onClick={handleOnDigit}>4</KeypadButton>
        <KeypadButton value={5} onClick={handleOnDigit}>5</KeypadButton>
        <KeypadButton value={6} onClick={handleOnDigit}>6</KeypadButton>
        <FunctionsButton value="-" onClick={handleOnOperator}>-</FunctionsButton>
      </KeypadRow>
      <KeypadRow>
        <KeypadButton value={1} onClick={handleOnDigit}>1</KeypadButton>
        <KeypadButton value={2} onClick={handleOnDigit}>2</KeypadButton>
        <KeypadButton value={3} onClick={handleOnDigit}>3</KeypadButton>
        <FunctionsButton value="+" onClick={handleOnOperator}>+</FunctionsButton>
      </KeypadRow>
      <KeypadLastRow>
        <KeypadButton value={0} onClick={handleOnDigit}>0</KeypadButton>
        <KeypadButton value="." onClick={props.onDecimalPoint}>.</KeypadButton>
        <KeapadButtonEqual  value="="     onClick={props.onEqual}>=</KeapadButtonEqual>
      </KeypadLastRow>
    </KeypadContainer>
  )
}

I have read and studied the pattern, but how should I apply it to my application, I cannot yet understand and deal with it