Uncaught Error: Maximum update depth exceeded. Help me with the error in the code

Question

need help with this error Here's the code

Atom.js

import { atom, selector } from 'recoil'
import axios from 'axios'


export const notifications = atom({
    key: 'notificationsAtom',
    default: selector({
        key: 'defaultNotificationsState',
        get: async () => {
            const response = await axios.get('https://sum-server.100xdevs.com/notifications');
            return response.data;
        }
    })
});


export const notificationSelector = selector({
    key: 'notificationSelector',
    get: ({ get }) => {
        const notificationsr = get(notifications);
        const sum = notificationsr.networks + notificationsr.jobs + notificationsr.messaging + notificationsr.notifications;
        return sum
    }
})

App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { RecoilRoot, selector, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { notifications, notificationSelector } from './source/atom/atom'

import { useEffect } from 'react'
import axios from 'axios'

function App() {



  return (
    <>
      <RecoilRoot>
        <Buttons></Buttons>
      </RecoilRoot>
    </>
  )
}


function Buttons() {


  const selector = useRecoilValue(notificationSelector)
  const notification = useSetRecoilState(notifications)

  return (
    <div>
      <button id="home">Home</button>
      <button>notification({notification.notifications})</button>
      <button>Jobs({notification.jobs})</button>
      <button>Messages({notification.messaging})</button>

      <button>Me- {selector}</button>
    </div>
  )
}

export default App

Tried this without fecthing the api and hardcoding the value it works fine that way but when i try to fetch value it shows the error

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.