Hey,

I have a problem where some elements shown depending on the stored state wont disappear again after clearing the state variable. content stuck from previous state?

See attached screen recording so you see what I mean.

Expected result:

I want it to go back to initial page, where there's no boxes showing items from the string array.

my component code:

'use client';
import React, { createContext } from 'react';
import InputBox from './input';
import OutPutBox from './output';
import forbidden_ingredients from '../utils/forbidden_ingredients.json';

export default function Matcher() {
  const [input, setInput] = React.useState('');

  return (
    <>
      <div className='text-center p-10'>
        <h3>Input:</h3>
        {input}
        <h3>Output:</h3>
        <div className='grid grid-cols-4 gap-4'>
          {input.split(' ').map((i) => (
            <div
              className={
                forbidden_ingredients.includes(i)
                  ? 'border border-red-600'
                  : 'border border-gray-500'
              }
              key={i}
            >
              {i}
            </div>
          ))}
        </div>
      </div>
      <form>
        <label
          htmlFor='default-search'
          className='mb-4 text-sm font-medium text-gray-900 sr-only dark:text-white'
        >
          Search
        </label>
        <div className='relative'>
          <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>
            <svg
              className='w-4 h-4 text-gray-500 dark:text-gray-400'
              aria-hidden='true'
              xmlns='http://www.w3.org/2000/svg'
              fill='none'
              viewBox='0 0 20 20'
            >
              <path
                stroke='currentColor'
                stroke-linecap='round'
                stroke-linejoin='round'
                stroke-width='2'
                d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'
              />
            </svg>
          </div>
          <input
            type='search'
            id='default-search'
            className='block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
            placeholder='Input ingredients list you wanna check'
            value={input}
            onChange={(e) => setInput(e.target.value)}
          ></input>
        </div>
      </form>
    </>
  );
}