React route is rendered twice when I use useStorage hook

{
  path: '/edit',
  element: <EditNote />,
},

<Button
    action={() => {
        console.log('edit clicked'); // Called once
        navigate(`/edit`);
    }}
/>

import { useNavigate } from 'react-router-dom';

import { Storage } from '@plasmohq/storage';
import { useStorage } from '@plasmohq/storage/hook';

import { StorageKey } from '~constants';
import type { NoteOutput } from '~schemas/schema';

type Notes = { [key: number]: NoteOutput };

export function EditNote() {
    // If I remove this const everything is rendered once.
    const [notes] = useStorage<Notes>({
        key: StorageKey.NOTES,
        instance: new Storage({
            area: 'local',
            allCopied: true,
        }),
    });
    const navigate = useNavigate();

    // Called twice
    console.log('edit');
    
    // Called twice, first with [] and then with multiple notes [{...}, {...}, ...]
    console.log(notes);

    return (
        <div>
            <button onClick={() => navigate(`/`)}>back</button>
        </div>
    );
}