Well, you need to get the structure of the returned payload from the API correct. It does not have an accounts property.

The payload looks like this:

{
  "success":true,
  "data":[{"account":"joejerde","assets":"11933"},{"account":"protonpunks","assets":"9072"}],
  "queryTime": 1646267075822
}

So you can rename the data property while destructuring. const { data: accountList } = await res.json();

function UserAccounts() {
  const [accounts, setAccounts] = useState();

  useEffect(() => {
    async function fetchAccounts() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
      );
      const { data: accountList } = await res.json();

      setAccounts(accountList);

      // logging both the state and the fetched value
      console.log(accounts, accountList);
      // accounts (state) will be undefined
      // if the fetch was successful, accountList will be an array of accounts (as per the API payload)
    }

    fetchAccounts()
  
  }, [])

  return <div>
    {JSON.stringify(accounts)}
  </div>
}

Edit: using some other variable name while destructuring, confusing to use the same variable name as the state (accounts).

Working codesandbox

One thing I would change is working with try/catch surrounding async/await statements. If your await statement fails it will never reach the console.log statement. Unless you have another component handling those errors, I would use it in that way.

That is my suggestion:

function UserAccounts() {
  const [accounts, setAccounts] = useState();

  useEffect(() => {
    try {
     async function fetchAccounts() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
      );
      const { accounts } = await res.json();

      setAccounts(accounts);
      console.log(accounts);
     }
    } catch (err) {
      console.log(err)
      // do something like throw your error
    }

    fetchAccounts();
  }, []);
 
}

since state function runs asyncronousely . therefore when you use setAccounts it sets accounts variable in async way , so there is a preferred way of doing this thing is as below

problems i seen

1.fetch result should destructured with data instead of accounts variable

2.setAccounts function is running async way so it will not print result immedietly in next line

import { useEffect, useState } from "react";

export default function App() {
  const [accounts, setAccounts] = useState();

  async function fetchAccounts() {
    const res = await fetch(
      "https://proton.api.atomicassets.io/atomicassets/v1/accounts"
    );
    const { data } = await res.json();
    setAccounts(data);
  }

  // on component mount / onload
  useState(() => {
    fetchAccounts();
  }, []);

  // on accounts state change
  useEffect(() => {
    console.log(accounts);
  }, [accounts]);

  return <div className="blankElement">hello world</div>;
}

check here sample