I'm trying to store user input in local storage and had it functioning. But because I will need to test it, I have changed my code and made a function that will work as a custom hook, that I will call in my tests also. Now the page is rendering but I am not able to type into the input box? When hovered over the box the mouse cursor doesn't even respond as if it isn't an input field.

I believe the problem lies in my useStateWithLocalStorage function:

import { useState, useEffect } from 'react';

const useStateWithLocalStorage = (defaultValue, key) => {
  const [value, setValue] = useState(() => {
    const storedValues = localStorage.getItem(key);

    return storedValues !== '' ? JSON.parse(storedValues) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useStateWithLocalStorage;

In particular this line

return storedValues !== '' ? JSON.parse(storedValues) : defaultValue;

The value before anything is parsed into the localstorage should be name: ''

Here is my component:

import React from 'react';
import { Container, Title } from '@mantine/core';
import useStateWithLocalStorage from './Handlers';

const UserForm = () => {
  const [inputValue, setInputValue] = useStateWithLocalStorage('', 'form');

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
  }

  function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    setInputValue((previousValues) => ({
      ...previousValues,
      [event.target.name]: event.target.value,
    }));
  }
  return (
    <Container>
      <Title order={2}>Welcome {inputValue.name}</Title>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">
          Name
          <input
            type="text"
            name="name"
            id="name"
            placeholder="enter your name"
            onChange={handleChange}
            value={inputValue.name}
          />
        </label>
      </form>
    </Container>
  );
};

export default UserForm;

I hope I've explained myself well enough and haven't wasted anyone's time. I'd be thankful for any help.