Derived atom updates not reflected in UI

[benmoussa96]

Bug Description

I am using Jotai to create a checkbox list of selectable accounts. I am using the toggleAccountByAddress derived atom to add to/remove from a selectedAccounts array of strings that keeps track of selected account addresses. Then I use selectedAccounts.includes(account.address) to updates the checked attribute.

The array does in fact update but the changes are not reflected in the UI (checked attribute)

Run code on Stackblitz

You can run the code here: https://stackblitz.com/edit/stackblitz-starters-vnpghv4r?file=app%2Fpage.tsx

Code

'use client';

import { atom, useAtom } from 'jotai';

export class Account {
  id: number;
  address: string;
  connected: boolean;
}

const accounts: Account[] = [
  {
    id: 1,
    address: '0x348a0b6ce8d9d80270f10dcb03b4beb1d3f86e75',
    connected: false,
  },
  {
    id: 2,
    address: '0x6098a5638d8d7e9ed2f952d35b2b67c34ec6b476',
    connected: false,
  },
  {
    id: 3,
    address: '0x869f51989bbe4a49a03daf49ec57572fccef3b81',
    connected: false,
  },
  {
    id: 4,
    address: '0x3d9d58cf6b1dd8be3033ce8865f155fac16186cc',
    connected: false,
  },
];

const toggleAccount = (selectedAccounts: string[], address: string) => {
  const index = selectedAccounts.indexOf(address, 0);

  if (index > -1) {
    selectedAccounts.splice(index, 1);
  } else {
    selectedAccounts.push(address);
  }

  console.log('selectedAccounts: ', selectedAccounts);
  return selectedAccounts;
};

export const selectedAccountsAtom = atom<string[]>([]);

export const toggleAccountByAddressAtom = atom(
  () => {},
  (get, set, address: string) => {
    set(
      selectedAccountsAtom,
      toggleAccount(get(selectedAccountsAtom), address)
    );
  }
);

export default function Home() {
  const [selectedAccounts] = useAtom(selectedAccountsAtom);
  const [, toggleAccountByAddress] = useAtom(toggleAccountByAddressAtom);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {accounts.map((account) => (
        <div key={`my-accounts-${account.address}`}>
          <input
            type="checkbox"
            checked={selectedAccounts.includes(account.address)}
            onChange={() => toggleAccountByAddress(account.address)}
          />
          {account.address}
        </div>
      ))}
    </main>
  );
}

Reproduction Link

https://stackblitz.com/edit/stackblitz-starters-vnpghv4r?file=app%2Fpage.tsx