RealtimeDB having issues

import PocketBase from 'pocketbase';
import { useEffect, useState } from 'react';

function App() {
  const client = new PocketBase('http://127.0.0.1:8090');
  const [data, setData] = useState({});
  const [title, setTitle] = useState('');

  useEffect(() => {
    client.realtime.subscribe('sample/36p2v9dpch3p1rf', function (e) {
      console.log('realtime', e.record);
      setData(e.record);
    });
  });
  const getData = async () => {
    const record = await client.records.getOne('sample', '36p2v9dpch3p1rf');
    setData(record);
  };

  const updateData = async () => {
    await client.records.update('sample', '36p2v9dpch3p1rf', { title: title });
  };
  useEffect(() => {
    getData();
  }, []);

  client.realtime.unsubscribe('sample/36p2v9dpch3p1rf');
  return (
    <div className="App">
      <h1>My App</h1>
      <p>
        {data.title}
        {'   '}
        <b>{data.id}</b>
      </p>
      <input
        type="text"
        placeholder="Update Data"
        onChange={(e) => setTitle(e.target.value)}
      />
      <button onClick={updateData}>Update</button>
    </div>
  );
}

export default App;

This is my simple code for testing the realtime DB, and I am facing an issue here, that is I can only update the data in realtime once and I need to refresh the page to again update the data. But in case of Dashboard of pocetbase I can update the data and it reflects instantly on the client side. Why is this so?

[rajesh6161]

I am making a good project using Pocketbase, which can serve as tutorial for other learners, so trying to grasp all of it which is included until now in pocketbase. Btw, its an awesome project that you guys are building.

[rajesh6161]

@ganigeorgiev thanks buddy! I got the idea, it works now 🎊