Как пробросить props и ref в TextField используя react-hook-form

В своем приложении я использую recat-hook-form и mui. Из родительского компонента Step1 в дочерний компонент Input я передаю ref и props, но это не работает и я получаю такие ошибки. Сломал голову, перепробовал все, что нашел в интернете, но ничего не помогает. Может я что то не так делаю?

Код компонента Input:

import React, {forwardRef} from 'react'; import TextField from '@mui/material/TextField';

const Input = forwardRef((props, ref) => {

    return (
        <TextField
            inputRef={ref}
            variant="outlined"
            margin="normal"
            {...props}
            fullWidth
        />
    )
});

export default Input;

Код компонента Step1:

import React from 'react';
import MainContainer from "./components/MainContainer";
import {Typography} from "@mui/material";
import Form from "./components/Form";
import {useForm} from "react-hook-form";
import PrimaryButton from "./components/PrimaryButton";
import Input from "./components/Input";

const Step1 = () => {
    const {register, handleSubmit, errors} = useForm({
        mode: "onBlur"
    })

    return (
        <MainContainer>
            <Typography component="h2" variant="h5">Шаг 1</Typography>
            <Form>
                <Input
                    ref={register}
                    id="FirstName"
                    type="text"
                    label="First Name"
                    name="FirstName"
                />
                <Input
                    ref={register}
                    id="Surname"
                    type="text"
                    label="Surname"
                    name="Surname"
                />
                <PrimaryButton>Следующий шаг</PrimaryButton>

            </Form>
        </MainContainer>
    );
};

export default Step1;

Получаю вот такие ошибки:

Uncaught TypeError: path.split is not a function
    at get (get.ts:11:1)
    at register (createFormControl.ts:924:1)
    at setRef (setRef.js:16:1)
    at useForkRef.js:15:1
    at setRef (setRef.js:16:1)
    at useForkRef.js:16:1
    at commitAttachRef (react-dom.development.js:23543:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23401:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24578:1)
    at commitLayoutEffects_begin (react-dom.development.js:24564:1)

react-dom.development.js:18572 The above error occurred in the <input> component:

    at input
    at http://localhost:3000/static/js/bundle.js:1500:66
    at div
    at http://localhost:3000/static/js/bundle.js:1500:66
    at InputBase (http://localhost:3000/static/js/bundle.js:8719:83)
    at OutlinedInput (http://localhost:3000/static/js/bundle.js:11806:82)
    at div
    at http://localhost:3000/static/js/bundle.js:1500:66
    at FormControl (http://localhost:3000/static/js/bundle.js:7266:82)
    at http://localhost:3000/static/js/bundle.js:1500:66
    at TextField (http://localhost:3000/static/js/bundle.js:14355:83)
    at _c
    at form
    at Form (http://localhost:3000/static/js/bundle.js:434:5)
    at div
    at http://localhost:3000/static/js/bundle.js:1500:66
    at Container (http://localhost:3000/static/js/bundle.js:17657:19)
    at MainContainer (http://localhost:3000/static/js/bundle.js:701:5)
    at Step1 (http://localhost:3000/static/js/bundle.js:307:63)
    at Routes (http://localhost:3000/static/js/bundle.js:66562:5)
    at Router (http://localhost:3000/static/js/bundle.js:66495:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:65304:5)
    at App
    at DataProvider (http://localhost:3000/static/js/bundle.js:194:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught TypeError: path.split is not a function
    at get (get.ts:11:1)
    at register (createFormControl.ts:924:1)
    at setRef (setRef.js:16:1)
    at useForkRef.js:15:1
    at setRef (setRef.js:16:1)
    at useForkRef.js:16:1
    at commitAttachRef (react-dom.development.js:23543:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23401:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24578:1)
    at commitLayoutEffects_begin (react-dom.development.js:24564:1)