React Hook Form - Cannot read properties of null (reading 'useRef')

import { useRecoilValue } from 'recoil';
import styled from 'styled-components';
import { Basket } from '../../recoil/globalState';
import { EmptyBasket } from '../utilities/EmptyBasket';
import { useForm } from "react-hook-form";

export const OrderDetailsForm = () => {
    const basket = useRecoilValue(Basket);
    const { register, handleSubmit } = useForm();

    if (basket.length <= 0) {
        return <EmptyBasket />
    }

    const onSubmit = (data: any) => console.log(data);

    return (
        <OrderDetailsFormContainer>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input {...register("firstName")} />
                <input type="submit" />
            </form>
        </OrderDetailsFormContainer>
    )
}

const OrderDetailsFormContainer = styled.main`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
`