React: How to solve 'Spread types may only be created from object'?

Question

I am trying to create a handler method in React, but I'm getting a typescript error with spread operator. Could someone help with this error please? I did follow some suggestion on SO related typescript version and I installed typescript version 3.2.4. Still the error remains the same.

I get this error:

Spread types may only be created from object types.ts(2698) (parameter) prevState: string

I try to handle the onChange for form input for different useStates. This line of code works on the first input field, but not on the second, third, etc, which is why I was forced to create a handler to handle all the useStates inside. onChange= {event => setName(event.target.value)}

interface Props {
    mazeSettup: MazeSettup;
}

export const GameSettupForm: React.FC<Props> = (props:Props) => {
 const [name , setName] = useState(mazeSettup.playerName);
 const [height, setHeight] = useState(mazeSettup.mazHeight);

const handleInputChange = React.useCallback( (event: React.FormEvent<HTMLInputElement>) => {
    const name = event.currentTarget.value;

    setName((prevState) => (prevState ? {...prevState , name} : null));
 },[]);


   return (
        <Form onSubmit={handleSubmit}>
            <label htmlFor="name"> Player Name
                <input
                    type="text"
                    className="form-control"
                    id="playername"
                    name="mazeWidth"
                    placeholder="Maze Width"
                    value={mazeSettup.mazeWidth}
                    onChange= {event => setName(event.target.value)} />
            </label>

            <label htmlFor="name"> Maze Height
                <input
                    type="text"
                    name="mazeHeight"
                    placeholder="Maze Height"
                    value={mazeSettup.mazHeight}
                    onChange= {handleInputChange} />
            </label>

    )
}

Answer 1

I've stumbled with this message too and the answer is on this thread: Typescript: Spread types may only be created from object types

You'll need to do as follows since spreading with a generic type isn't supported yet

function foo<T extends object>(t: T): T {
  return Object.assign({}, t);
}

At your code would be

setName((prevState) => (prevState ? Object.assign({}, prevState, name}) : null));

Apparently they say that it get corrected on version >3.2 Generic object rest variables and parameters, but I'm using typescript >4.6 and still getting the error, so maybe you could use the old way with Object assign