Pagination and sort

I'm trying to render different posts based on a request in my react component using axios,

function hideOnClick(id) {
      setHide({value: id})
      console.log(id);
      const body = {
          'chordId' : id,
      }

      axios.post(url, body)
      .then(function(response){
          console.log(response.data);
          // Create a new element
            var newNode = document.createElement('div');

            // Add ID and content
            newNode.id = 'NewChord_id';
            newNode.innerHTML = response.data;
          var currentNode = document.querySelector('#chord_id');
          currentNode.replaceWith(newNode);

        })
        .catch(error => {
                console.log("ERROR:: ",error.response.data);
        });
}

Then in my PostController I'm returning this:

public function postBody(Request $request)
    {
        $chord = $request->get('chordId');

        $posts = Post::join('categories', function ($builder) {
            $builder->on('categories.id', '=', 'posts.category_id');
        })
        ->where('name', '=', Str::before($chord, '.'))
        ->get();


        return view('components.article')->with(array('posst' => $posts));
        // return $posts;
    }

then i change the div with id: chord_id with the one in my request. It's work, it shows me the right post, but the pagination still remain and if i check to the second page the post doesn't match my request.

There's a way to show only the correct posts and not just ordering those?

Don't know if this could help, but here is where i'm doing paginate

public function index()
    {
        return view('posts.index', [
            'posts' => Post::latest()->filter(
                request(['search', 'category', 'author'])
            )->paginate(1)->withQueryString(),
        ]);
    }