I'm trying to take a function out of an onClick event but i don't know why it's not working.

This code works

<ul className="list-group mt-3">
    {news.map((item) => (
        <li 
            key={item.name} 
            className="list-group-item text-capitalize"
        > 
            {item.name}
            <button 
                className="btn btn-dark btn-sm float-right"
                onClick={ () => dispatch( newsAction(item.url) ) }
            >
                Info
            </button>
        </li>
    ))}
</ul>

But i'm trying to cleanUp the code using this

const handleGetInfo = (url) => {
    dispatch( newsAction(url) )
}

return (
    <ul className="list-group mt-3">
        {news.map((item) => (
            <li 
                key={item.name} 
                className="list-group-item text-capitalize"
            > 
                {item.name}
                <button 
                    className="btn btn-dark btn-sm float-right"
                    onClick={ handleGetInfo }
                >
                    Info
                </button>
            </li>
        ))}
    </ul>
)

And it throws a 404 error when calling the API