I am setting up firebase user authentication for a reactjs app. Everything's been working so far but when I write const {signup} = useAuth() in the file that actually renders the login page, the page turns blank.

There is a context file set up with:

import React, { useContext, useState, useEffect} from 'react'
import {auth} from '../firebase'

const AuthContext = React.createContext()

function useAuth() {
    return useContext(AuthContext)
}

function AuthProvider({children}) {

const[currentUser, setCurrentUser]= useState()

function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email,password)
}

useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
    setCurrentUser(user)
})
    return unsubscribe
},[]); 

const value = {
    currentUser,
    signup
}
    
  return (
    <AuthContext.Provider value={value}>
    {children}
    </AuthContext.Provider>
  )
}

export {useAuth, AuthProvider}

With my RenderPage everything is working correctly, it's just a basic JSX/HTML return function with

import {useAuth, AuthProvider} from '../Contexts/AuthContext' 
import React, { useState, useRef } from "react";

function RenderPage() {
 return( 
<AuthProvider>
<h1>Generic text</h1>
<AuthProvider>)}
export default RenderPage;

And everything works perfectly,

But then when I put in the line const {signup} = useAuth() to make it:

import {useAuth, AuthProvider} from '../Contexts/AuthContext' 
import React, { useState, useRef } from "react";

function RenderPage() {
const {signup} = useAuth()
 return( 
<AuthProvider>
<h1>Generic text</h1>
<AuthProvider>
);

The page turns blank.

Does anyone have any idea why this might be? (I already checked the firebase API key and set it up on the realtime database)

Thanks in advance