useContext x is not a function

So I'm trying to get the current user from the backend (using supabase, react) to determine wether I should show the profile or the login prompt when they click the user icon. I've tried using some differen t methods but I keep running into the same problem. I'm using a the useConntext and context.provider from react to store the user in, so that it can be accessed from anywhere. I want the application to check anywhere in the app who is the current user. Of course this would preferably be only onAuthStateChange but that's not the main worry at the moment. At this moment I keep on running into the same error: setCurrentUser isn't a function at the App.js component. This setCurrentUser is part of the useState I put into DataContext.js (my context file). The App does run but the console keep showing the same error and I was able to console log the user data before changing it to the setCurrentUser function.

3 most relevant files:

App.js

import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import AuthPage from './components/AuthPage';
import Products from './components/Products';
import Pants from './components/Pants';
import Missing from './components/Missing';
import { Route, Routes as Switch } from 'react-router-dom';
import React, { useEffect, useContext } from 'react';
import DataContext from './components/context/DataContext';
import backbase from './config/backbaseClient';

function App() {

  const setCurrentUser = useContext(DataContext)

  useEffect(() => {
    async function fetchData() {
        const { data: { user } } = await backbase.auth.getUser()
        await setCurrentUser(user)
    }
    fetchData()
  })


  return (
    <div className="App">
      <Navbar />
      <Switch>
        <Route path="/home" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about_us" element={<AboutUs />} />
        <Route path="/user" element={<AuthPage />} />
        <Route path="/products" element={<Products />} />
        <Route path='/pants' element={<Pants />} />
        <Route path="*" element={<Missing />} />
      </Switch>
      <Footer />
    </div>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { DataProvider } from './components/context/DataContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DataProvider>
      <Router>
          <Routes>
              <Route path="/*" element={<App />} />
          </Routes>
      </Router>
    </DataProvider>
  </React.StrictMode>
);

DataContext.js

import React, { createContext, useState } from 'react'

const DataContext = createContext({});

export const DataProvider = ({ children }) => {

    const [currentUser, setCurrentUser] = useState(null)

    /* suggested using other function to update for unwanted complications
    thus a function taking a value and putting it in setCurrentUser */

    return (
        <DataContext.Provider value={{
            setCurrentUser, currentUser
        }}>
            {children}
        </DataContext.Provider>
    )
}

export default DataContext;

Add curly brackets to const { setCurrentUser } = useContext(DataContext) in App.js.