Why does the other event stop when change in type in discord.j with react?

Question

I have a handler in discord.js which is

client.on('presenceUpdate', (oldStatus, newStatus) => {
    if (newStatus.length !== 0) {
        newStatus.activities.forEach(element => {
          if (element.name === 'Spotify') {
            const obj = {
              name: element.name,
              spotify: element.syncId,
              top: element.assets.largeText,
              artist: element.details,
              album: element.state,
              url: element.assets?.largeImageURL(),
            }
            socket.emit('activity', obj);
          } else if (element.name === 'Visual Studio Code') {
            const obj = {
              name: element?.name,
              top: element.assets?.largeText,
              artist: element?.details,
              album: element?.state,
              url: element?.assets?.largeImageURL(),
            }
            socket.emit('activitycode', obj);
          }

          oldStatus.activities.forEach(ele => {
          if (ele?.nalement.name !== 'Spotify') {
            socket.emit('stop')
          } else if (element.name !== 'Visual Studio Code') {
            socket.emit('stopcode')
          }
        })
      })     
    }

This is my react part which handles it all

function About() {
  const [spotify, setspotify] = React.useState();
  const [code, setcode] = React.useState();
  useEffect(() => {
    const socket = io();
    socket.on("activity", (activity) => {
      setspotify(activity);
    });
    socket.on("stop", (activity) => {
      setspotify();
    });
    socket.on("stopcode", (activity) => {
      setcode();
    });

    socket.on("activitycode", (activity) => {
      setcode(activity);
    });

    axios.get('/code').then(res => {
      setcode(res.data);
    });

    axios.get("/activity").then((res) => {
      setspotify(res.data);
    });
  }, []); 
  return (
      <section className="info flex" >
        <LazyLoad>
          <img src='./asset/avatar.jpg' alt='avatar' width="280" height="280" sizes="280px" decoding="async" className='avatar' />
        </LazyLoad>
        <h1 className='title'>Instict</h1>
        <p className='description'>
          Developing since 2018, i have created many bugs.
        </p>
        <div>
        {(spotify || code) && <h2 className='subtitle blogheading'>Activity</h2>}
          {spotify  && <div>
            <div className='activity-item'>
                      <img src={spotify.url} alt='activity' className="activity-item-image"/>
                    <div className='activity-item-info'>
                      <h3 className='activity-item-title'>{spotify.name}</h3>
                      <a href={`https://open.spotify.com/track/${spotify.spotify}`}> 
                        <p className='activity-item-description'>{spotify.artist} - {spotify.album}</p>
                      </a>
                    </div>
              </div>
          </div>}
          {code  && <div>
            <div className='activity-item'>
                      <img src={code.url} alt='activity' className="activity-item-image"/>
                    <div className='activity-item-info'>
                      <h3 className='activity-item-title'>{code.name}</h3>
                      <p>{code.top}</p>
                      <p>{code.album}</p>
                      <p>{code.artist}</p>
                    </div>
              </div>
          </div>}
        </div>          
      </section>
  );
}

but if I change the say the song or the file I'm working on it stops the other one say if I change my song the socket.emit('stopcode') gets run

Fairly I have no idea how to deal with this but I am getting it's the presence update part which I have to deal with, for those wondering I use discord.js, socket.io.

example: https://gyazo.com/a60c2b51d264707ea5aaadfb9c62e096