Argument of type 'null' is not assignable to parameter of type 'string'. UseRef

Как я могу типизровать useRef.current в string? Я пробовал передовать начальное значение UseRef в виде строки, но тогда возникает другая проблема и передаче этого ref в компонент там возникают проблемы с типизацией

'use client'
import React, { FormEvent, forwardRef, useRef, useState } from 'react'
import { Button, Stack, TextField } from '@mui/material'
import styles from './mainPage.module.scss'
import { useTodo } from '../../hooks/useTodo'

const MainPage = () => {


    const { functions, get } = useTodo()
    const titleRef = useRef(null)

    const sendTodo = (e: FormEvent) => {
        e.preventDefault()
        if(titleRef.current === '') return
        functions.create(titleRef.current, '')
        titleRef.current = null
    }
    
    return (
        <div className={styles.root}>
            <Stack spacing={1} width='20%' component='form' onSubmit={(e) => sendTodo(e)}>
                <TextField ref={titleRef} value={titleRef.current} id="outlined-basic" label="Outlined" variant="outlined" />
                <Button type='submit' variant='outlined'>Create</Button>
            </Stack>
            
        </div>
    )
}

export default MainPage

import React, { FormEvent, useEffect } from "react"


export interface ITodo {
    id: number
    title: string
    description: string
}

export interface IUseTodoReturn {
    functions: {
        create: (title: string, description: string) => void
        delete: (id: number) => void
    } 
    get: ITodo[]
}


export const useTodo = (): IUseTodoReturn => {

    const [todo, setTodo] = React.useState<ITodo[]>([])

    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todo))
    }, [ todo ])


    const createTodo = (title: string, description: string): void => {
        setTodo([...todo, { id: Date.now(), title, description }])
    }


    const deleteTodo = (id: number) => {
        const filteredArray = todo.filter(todo => todo.id !== id)
        setTodo(filteredArray)
    }


    return {
        functions: { create: createTodo, delete: deleteTodo },
        get: todo
    }
}