I am working on a product feedback app (with react) for my portfolio and came across an unexpected problem. The issue takes place in my SuggestionDetails component where I am getting the current id with useParams and filtering out the current product based on that id. Everything works and renders perfectly fine with the pre-existing suggestions array, but the problem starts when I try to render a new suggestion that I have created and added to the array.

This is how I am getting the current suggestion:

// I am getting the suggestions array through props

const { id } = useParams();

const [suggestion, setSuggestion] = useState(() => {
  const currentSuggestion =
    suggestions &&
    suggestions.filter((suggestion) =>
      suggestion.id === parseInt(id) ? suggestion : null
    );
  return currentSuggestion;
});

This is what the return value of the current suggestion should be (the new suggestion is still not created here):

Here when I try to filted out the new suggestion (the last element) I get an empty array:

I am still kind of new to this stuff and dont understand why this is happening. I have not added the code where I am creating a new suggestion and adding it to the current state, but I don't think the issue is there since it has clearly been created and added to current list of suggestion requests.

Any information on this would be greatly appreciated, thank you.