render a list using map but filter base on user’s query in frontend

I want to achieve this result: https://resepi-khairulaming.vercel.app/

It’s easy to just fetch the result from backend by passing the query, but how about doing the filter on the client side? do I need to hold 2 states, eg.

const [data, setData] = useState() // setData from api source on onload const [filteredData setFilteredData] = useState(data)

one is the original source and the another is the filtered source? Because the user can clear the query and I have to restore unfiltered data.

is there any better solution than this?