How do I retrieve the variable value aptly in react with callback function?

Question

I have this code in react app:

function xyz (callback) { 
  axios.get(`https://example.com`)
    .then(res => {
      const filepath = res.data.Items[0].filepath.S
      callback ({autoplay: false, controls: true,sources: [{src: filepath}]})
    }).catch(err =>{
      console.log(err);
    })
  }

function App() {
  return (
    <VideoPlayer { ...xyz(function(response) {console.log(response)});} />
  )
}

This works as expected and I can log the response. But what I am trying to do is assign the response of the xyz function directly within the VideoPlayer tags.

For e.g., What I want to achieve is:

<VideoPlayer {...return-value-of-xyz-function}

How do I achieve this? Happy to provide more context if needed. Thanks!