Search Box implementation and filter posts?

I've written the code to filter the post in the useEffect. I can't find a way to implement it. I already have 5 posts in my database. I'm bringing all 5 posts using useSelector but I can't find a way to filter while I am typing in the search bar. If I try to set the filtered value in the setListsPosts2(filteredPostList) when fetching those data using the map I didn't get my all posts.

when I do const [listPosts2, setListPosts2] = useState([posts]); it started continues loop and giving error also as asking me add posts in the lists of useEffect dependencies but when i add it it started continues loop of error

here is my homepage.js file

import { useEffect, useState } from 'react';
import { Col, Container, Form, Row } from 'react-bootstrap';
import { ToastContainer } from 'react-toastify';
import { useDispatch, useSelector } from 'react-redux';
import { listPosts } from '../actions/postActions';
import Banner from '../components/Banner';
import Post from '../components/Post';
import Paginate from '../components/Paginate';

const HomePage = ({ match }) => {
  const [keyword, setKeyword] = useState('');
  const [listPosts2, setListPosts2] = useState([]);

  const pageNumber = match.params.pageNumber || 1;

  const dispatch = useDispatch();

  const postLists = useSelector((state) => state.postLists);
  const { posts, pages, page } = postLists;

  const postCreate = useSelector((state) => state.postCreate);
  const { success: successCreate } = postCreate;

  const postUpdate = useSelector((state) => state.postUpdate);
  const { success: successUpdate } = postUpdate;

  const postDelete = useSelector((state) => state.postDelete);
  const { success: deleteSuccess } = postDelete;

  useEffect(() => {
    const filteredPostList = posts?.filter((post) =>
          post.title.toLowerCase().includes(keyword.toLowerCase())
        );

    setListPosts2(filteredPostList);

    dispatch(listPosts(pageNumber));
  }, [dispatch, pageNumber, deleteSuccess, successCreate, successUpdate]);

  return (
    <div>
      <ToastContainer />
      <Banner />
      <div className="my-3">
        <Container id="posts">
          <Form className="searchBoxForm">
            <Form.Control
              type="text"
              name="q"
              onChange={(e) => setKeyword(e.target.value)}
              placeholder="Search Posts..."></Form.Control>
          </Form>
          <h2 className="mt-3" style={{ letterSpacing: '4px' }}>
            POSTS
          </h2>
          <Row className="mt-3">
            <Col>
              <Row>
                {posts
                  ?.map((post) => (
                    <Col key={post._id} md={3} sm={4}>
                      <Post post={post} />
                    </Col>
                  ))
                  .sort()
                  .reverse()}
              </Row>
              <Paginate pages={pages} page={page} />
            </Col>
          </Row>
        </Container>
      </div>
    </div>
  );
};

export default HomePage;