Fix for my JavaScript Calculator using React

I have built a calculator using JS/React and I can’t seem to implement a function.

Basically I want that if 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign).

So 2*-9=-18, but 12*-/3=4.

Also when I type 5*-, without even entering a second operand, it becomes 5*5.

My Code:

const { useState } = React;

function Calculator() {
  const [displayValue, setDisplayValue] = useState('0');
  const [firstOperand, setFirstOperand] = useState(null);
  const [operator, setOperator] = useState(null);
  const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);

  const inputDigit = (digit) => {
    if (waitingForSecondOperand) {
      setDisplayValue(String(digit));
      setWaitingForSecondOperand(false);
    } else {
      setDisplayValue(displayValue === '0' ? String(digit) : displayValue + digit);
    }
  };

  const inputDecimal = () => {
    if (!displayValue.includes('.')) {
      setDisplayValue(displayValue + '.');
    }
  };

  const performOperation = (nextOperator) => {
    const inputValue = parseFloat(displayValue);

    if (firstOperand === null) {
      setFirstOperand(inputValue);
    } else if (operator) {
      const result = calculate(firstOperand, inputValue, operator);
      setDisplayValue(String(result));
      setFirstOperand(result);
    }

    setWaitingForSecondOperand(true);
    setOperator(nextOperator);
  };

  const calculate = (firstOperand, secondOperand, operator) => {
    switch (operator) {
      case '+':
        return firstOperand + secondOperand;
      case '-':
        return firstOperand - secondOperand;
      case '*':
        return firstOperand * secondOperand;
      case '/':
        return firstOperand / secondOperand;
      default:
        return secondOperand;
    }
  };

  const resetCalculator = () => {
    setDisplayValue('0');
    setFirstOperand(null);
    setOperator(null);
    setWaitingForSecondOperand(false);
  };

  return (
    <div className="calculator">
      <div id="display" className="display">{displayValue}</div>
      <button id="clear" className="button" onClick={resetCalculator}>AC</button>
      <button id="divide" className="button operator" onClick={() => performOperation('/')}>/</button>
      <button id="multiply" className="button operator" onClick={() => performOperation('*')}>*</button>
      <button id="subtract" className="button operator" onClick={() => performOperation('-')}>-</button>
      <button id="seven" className="button" onClick={() => inputDigit(7)}>7</button>
      <button id="eight" className="button" onClick={() => inputDigit(8)}>8</button>
      <button id="nine" className="button" onClick={() => inputDigit(9)}>9</button>
      <button id="add" className="button operator" onClick={() => performOperation('+')}>+</button>
      <button id="four" className="button" onClick={() => inputDigit(4)}>4</button>
      <button id="five" className="button" onClick={() => inputDigit(5)}>5</button>
      <button id="six" className="button" onClick={() => inputDigit(6)}>6</button>
      <button id="decimal" className="button" onClick={inputDecimal}>.</button>
      <button id="one" className="button" onClick={() => inputDigit(1)}>1</button>
      <button id="two" className="button" onClick={() => inputDigit(2)}>2</button>
      <button id="three" className="button" onClick={() => inputDigit(3)}>3</button>
      
      <button id="equals" className="button equals" onClick={() => performOperation('=')}>=</button>
      <button id="zero" className="button" onClick={() => inputDigit(0)}>0</button>
    </div>
  );
}

ReactDOM.render(<Calculator />, document.getElementById('root'));

I have tried everything that came to mind but nothing seems to work, or even if it works it will break the whole calculator.