The error

This is the error that shows in the brower over the webpage.

Compiled with problems:X

ERROR


src\components\SignIn.js
  Line 5:21:  React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

SignIn.js

The part of my code that uses the React hook useRef.

import React, { useRef } from 'react'
import { Card, Button, Form } from 'react-bootstrap'

export default function signin() {
    const userRef = useRef()

    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className='text-center mb-4'>Magnet</h2>
                    <Form>
                        <Form.Group id="username">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type='text' ref={userRef} required />
                        </Form.Group>
                    </Form>
                </Card.Body>
            </Card>
        </>
    )
}

>Solution :

You can’t call a hook in a normal function, it must be called from a hook or functional component.

export default function signin() 

The naming convention above doesn’t refer to either. Change to Signin.
And indeed, the error message explains that.