react state that is initalized by props does not update when component recieves new props [duplicate]

I am using Next.js with a component that is first skeleton-loaded while the website waits for the data (using tanstack react query):

if (isPending) {
    return <MyComponent
        name={"Loading...."}
        hobbies={[]}
    />
}

return <MyComponent name={data.name} hobbies={data.hobbies}

Inside of this component I have a state for the hobbies so that the user can mutate the hobbies list locally before sending it to the database.

function onSubmit() { // update to server }

function MyComponent(props) {
    const [hobbies, setHobbies] = useState(props.hobbies);
    
    return (
        <form>
           <h1 key={name}>{name}</h1>
           <MyList hobbies={hobbies} />
           <div>
               <input />
               <button type="button" onClick={() => {}}>add</button>
           </div>
           <button>submit</button>
        </form>
    )
}

However once the data loads, while the other data (the name) updates, the hobbies variable does not, and it stays as an empty list. This is because of the key argument I have on the h1, but when I add the key to MyList, it does not re-render. I have to go to another url then come back for it to reload the hobbies argument.

I assume this is because I am initially setting the state of the hobbies as empty, and then once the data loads, it doesn’t reupdate the state, but how do I fix this?