The terminal/console returns no error. I am confused as to where I am going wrong. The handleLeftClicks() is used to render the # of times the left button is clicked and respectively for right. The allClicks within History component is meant to render total # of clicks. I am unable to update both {left} and {right}. I tried console logging both the functions but couldn't get an output in the console.

I really apologise if this newbie question wasted your time.

import React, { useState } from "react";

const History = (props) => {
  if (props.allClicks.length === 0) {
    return <div>The app is used by pressing the buttons</div>;
  }

  return <div>button press history: {props.allClicks.join(" ")}</div>;
};

const Button = ({ handleClick, text }) => (
  <button onClick={handleClick}>{text}</button>
);

const App = () => {
  const [left, setLeft] = useState(0);
  const [right, setRight] = useState(0);

  const [allClicks, setAll] = useState([]);

  const handleLeftClicks = () => {
    console.log("left click");

    setAll(allClicks.concat("L"));
    setLeft(left + 1);
  };

  const handleRightClicks = () => {
    console.log("right click");

    setAll(allClicks.concat("R"));
    setRight(right + 1);
  };
  console.log(left);
  console.log(right);
  console.log(allClicks);

  return (
    <div>
      {left}
      <Button handleClick={handleLeftClicks} text="left" />

      <Button handleClick={handleRightClicks} text="right" />

      {right}

      <History allClicks={allClicks} />
    </div>
  );
};

export default App;