Can anyone please see what is wrong here? Started building an app and got stuck in the beginning...

Getting this error when triggering loginToSpotify():

TypeError: _services_login__WEBPACK_IMPORTED_MODULE_0__.login is not a function
    at loginToSpotify (Login.js:6:1)
    at onClick (Login.js:15:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

index.js

import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.js

import Login from './pages/Login'

const App = () => {
  return (
    <>
      <Login />
    </>
  )
}

export default App

Login.js

import loginService from '../services/login'

const Login = () => {
  const loginToSpotify = async () => {
    try {
      const response = await loginService.login()
    } catch (err) {
      console.log(err)
    }
  }

  return (
    <>
      <div>
        <button onClick={() => loginToSpotify()}>Login using Spotify</button>
      </div>
    </>
  )
}

export default Login

login.js

import axios from 'axios'

const login = async () => {
  const response = await axios.post('/login')

  return response.data
}

export default { login }