reactjs - is there a way to create REFs dynamically then access them

Question

Here is a simple component where I'm adding buttons dynamically:

const MyCompanent = ({ listOfButtons }) => {
    const handleOnKeyUp = (event) => {
        var key = event.keyCode

         // .......
         // access button by REF and do something
    }

    const myButtons = listOfButtons.map((btn) => (
            <button
                key={btn.id}
                onKeyUp={(e) => handleOnKeyUp(e)}
                ref={?????}
            >
                {btn.name}
            </button>
    ))
    
    return (
        <div>
            {myButtons}
        </div>
    )
}

export default MyCompanent

Component gets list of buttons to show as props. I want the button do something specific when I press specific key when button is in focus. So I want to add REFs dynamically for each button to access/manipulate it in handleOnKeyUp function (or anywhere else in this component)

question from:https://stackoverflow.com/questions/65865780/is-there-a-way-to-create-refs-dynamically-then-access-them

Answer 1

Waitting for answers