I have the parent Posts.js component which map every object in posts array. In this function I try to filter all notes have same post_id as id of the current mapped post object. All stored in filteredNotes variable. Then I pass it to each child. Now the issue. When I want to add new note in specific post, the view doesn't update (new note was not added to the list) although the database and redux store has been updated successfully. But when I try to remove that filter function, everything works just fine so I guess the main problem is there. Any idea how to fix this? Thanks

Posts.js

  const posts = useSelector((state) => state.post.posts);
  const notes = useSelector((state) => state.notes.notes);

  useEffect(() => {
    dispatch(getPosts());
    dispatch(getNotes());
  }, []);

  const addNoteHandle = (val) => {
    dispatch(addNote({new_note: val}));
  }

  return (
    <div className="post__page">
      <div className="post__list">
        {posts.map((data) => {
          let filteredNotes = notes.filter((i) => i.post_id === data.id);
          return <Post data={data} notes={filteredNotes} />;
        })}
      </div>
      <PostForm addNewNote={addNoteHandle} />
   </div>
  );

Post.js

export const Post = ({ data, notes }) => {
  return (
    <div className="post__item">
      <div className="post__title">{data.title}</div>
      <div className="post__note">
        {notes.map(note => <div>{note.text}</div>)}
      </div>
    </div>
  );
};

NoteForm.js

const NoteForm = ({ addNewNote }) => {
  const [text, setText] = useState("");

  return (
    <div>
      <Input value={text} onChange={(e) => setText(e.target.value)} />
      <Button type="primary" onClick={() => addNewNote(text)} >
        <SendOutlined />
      </Button>
    </div>
  );
};

Action

 export const addNote = ({ new_note }) => async (dispatch) => {
    try {
      const res = await axios.post("http://localhost:9000/api/note", new_note);
      dispatch({ type: ADD_NOTE, payload: res.data });
    } catch (err) {
      dispatch({ type: NOTE_FAIL });
    }
 };

Reducer

case ADD_NOTE:
   return {
     ...state,
     notes: [...state.notes, payload]
   };