Context provider not Rendering any Component inside <AuthProvider>Childern</AuthProvider>

Question

I am New to React and the I am Using Context For First time, I am learning about Authentication with Firebase so I working on this SignUp Component. It was Working Fine Untill I put the Code between Context.Provider and React is not Rendering anything Inside it I also tried creating test.jsx which return Text in div to see if my SignUp component is causing error but even test is not rendering

I tried to find other article but i cannot pinpoint issue in my Code

App.js

import React from 'react'
import SignUp from "./components/SignUp";
import {Container} from 'react-bootstrap'
import { AuthProvider } from "./context/AuthContext";


function App() {
  
  return (
    <AuthProvider>
          <SignUp />
    </AuthProvider>
  );
}

export default App;

AuthContext.js

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


const AuthContext = React.createContext()


export function useAuth() {
    return useContext(AuthContext);
};

export function AuthProvider({ childern }) {

    const [currentUser, setCurrentUser] = useState();
    
    function signUp(email, password) {
        return auth.createUserWithEmailAndPassword(email, password);
    }

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


    const value = {
        currentUser,
        signUp
    }
    return (
        <AuthContext.Provider value={value} >
            {childern}
        </AuthContext.Provider>
  )
};

Btw SignUp is not Rendering at all It is blank page

SignUp.jsx

import React, { useRef, useState } from 'react'
import { Form, Card, Button,  Alert  } from 'react-bootstrap'
import { useAuth } from '../context/AuthContext';

export default function SignUp() {

    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();

    const { signUp } = useAuth();
    
    const [error, setError] = useState('')
    const [loading,SetLoading] = useState(false)

    async function handleSubmit(e) {
        e.preventDefault() 

        if (passwordRef.current.value !== passwordConfirmRef.current.value) {
            return setError['Password do not Match']
        }

        try {
            setError("")
            SetLoading(true)
            await signUp(emailRef.current.value, passwordRef.current.value)
            
        } catch {
            setError('Failed to Create an Account')
        }
        SetLoading(false)
    }

    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className='text-center mb-4'>Sign Up</h2>
                    {error && <Alert variant="danger" >
                        {error}
                    </Alert>}
                    <Form onSubmit={handleSubmit} >

                        <Form.Group id="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control type="email" ref={emailRef} required ></Form.Control>
                        </Form.Group>

                        <Form.Group id="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" ref={passwordRef} required ></Form.Control>
                        </Form.Group>

                        <Form.Group id="password-confrim">
                            <Form.Label>Password Confrimation</Form.Label>
                            <Form.Control type="password" ref={passwordConfirmRef} required ></Form.Control>
                        </Form.Group>
                        
                        <Button
                            disbled={loading}
                            className="w-100 mt-2" type="submit" >Sign Up</Button>
                    </Form>
                </Card.Body>
            </Card>
            <div className="w-100 text-center mt-2">
                Already have an account? Log In
            </div>
        </>
    )
}

React Dev Tools In Chrome

App -> AuthProvider -> Context.Provider

AuthProvider

Prop

{
  "children": "<ForwardRef />"
}

Hooks

[
  {
    "name": "State",
    "value": null
    }
  },
  {
    "name": "Effect",
    "value": "ƒ () {}"
    }
  }
]

Context.Provider

Props

{
  "value": {
    "currentUser": null,
    "signUp": "ƒ signUp() {}"
  }
}

i have been trying to find solution but couldn't