How to get custom number buttons to show on correct input field react.js

Having a hard time seeing how I could accomplish this. I created some custom number buttons from 0-9 that users can click on instead of using the keyboard. The problem I'm having is I have multiple dynamically created input fields depending on JSON Data so let's say there are 10 dynamically created input fields and a user starts with question one and the user then uses the custom number buttons I created and clicks numbers "145" to answer question one, but what happens is then all 10 inputs have the same number "145" not the problem the user was trying to solve. I'm using the context API to then save the values typed in on a function called getButtonValue that I then call to the parent component and save the values in a state array, so I know that my problem is that all the inputs share the same state array but how could I make sure the correct input the user clicks on is only receiving those values.

Thanks in advance.

My Custom Number Button Component:

import { FormContext } from "../../lib/FormContext";

function ActivityBar() {
  const { getButtonValue } = useContext(FormContext);

  return (
    <div className={`${activity.activity__workSheet__numberButton}`}>
      <button value={0} onFocus={(e) => getButtonValue(e)}>
        <img
          className={`${activity.activity__workSheet__img0}`}
          src={"/assets/activityNumber-btn.png"}
          alt="activity number button"
        />
    .... more code

Parent Component:

const [numberButtonClicked, setNumberButtonClicked] = useState([]);

const getButtonValue = (e) => {

setNumberButtonClicked((prevButtonClicked) => [
  ...prevButtonClicked,
  e?.target?.attributes[0].value
]);

};

  return (
    <Carousel>
       <div ref={imageRef} style={{ height: "100%" }}>
          {Object.entries(elements).map((element, i) => {
             const { fields } = element[1];

              if (fields) {
                return (
                  <Element
                    key={i}
                    field={fields[0]}
                    id={i}
                    useReff={`answer${i}`}
                    currentValue={
                      numberButtonClicked === "" ? null : numberButtonClicked.join("")
                    }
                  />
                );
              } else {
               return;
             }
           })}
        </div>
     </Carousel>