remove value from form within component

I am trying to let users remove values from there current settings.

I have a series of values users can have for there settings that are displayed in a pill format that they can click X on to delete, i.e.,

export default function Pill({ value, handleChange }) {

  // const [times, setTimes] = useState([]);

    return (
      <div className="bg-gray-600 text-white text-xs px-2 py-0.5 w-max-content rounded-lg align-middle mr-1 mb-1">
        {value}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="inline-block align-middle cursor-pointer"
          onClick={() => handleChange(value, "remove")}
        >
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </div>
    );
  }

This is used as a component as below,

{substanceDetails &&
              substanceDetails.map((subst) => (
                <Pill
                  registerInput={register}
                  optionLabel="substance"
                  value={subst.substance}
                  key={subst.substance}
                  optionName="substance"
                  allOptions={["Dexamphetamine", "Ritalin"]}
                  handleChange={handleChange}
                />
              ))}

Given the handle change, which needs to be changed, but it would look something like this,

const handleChange = (value, mode) => {
    let updatedValues = values;
    if (mode === 'remove') {
      updatedValues = values.filter((elem) => elem !== value);
    } else if (!updatedValues.includes(value)) updatedValues = [...values, value];
    setValues(updatedvalues);
  };

The difficulty is with the data i think stored in the state. looks like this,

[{
duration: 2
enddate: "1996-12-01T13:00:00.000Z"
planneddose: "10mg"
scheduledtimes: [8]
startdate: "1996-12-01T13:00:00.000Z"
substance: "Modafinil"
},......]

Is there any best practices for changing data that is sort of dynamic in how it loads?

I'm using react-hook-form fyi

Trying to use the example given below,

import React, { useState,useEffect } from 'react';


export default function Pill({ value, handleChange }) {

  const [valueSet, setValue] = useState();

  useEffect(() => {
    if (value != null) {
      setValue(value);
    }
  }, []);

  handleChange= (value, mode) => {
    if(mode==="remove") setValue(vals => vals.find(v=> v.duration === value.duration) ? vals.filter(v => v.duration !== value.duration) : [...vals, value])
  };
    return (
      <div className="bg-gray-600 text-white text-xs px-2 py-0.5 w-max-content rounded-lg align-middle mr-1 mb-1">
        {valueSet}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="inline-block align-middle cursor-pointer"
          onClick={() => handleChange(value, "remove")}
        >
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </div>
    );
  }

Receiving this error unfortunately,

Unhandled Runtime Error
TypeError: vals.find is not a function

Thanks!

Updating handle change,

const handleChange = (value, mode,optionName) => {
    if(mode==="remove") {setSettings(vals => vals.find(v=> v.optionName === value.optionName) ? vals.filter(v => v.optionName !== value.optionName) : [...vals, value])
    } 
  };

using this instead, so there is a key and value to find the appropriate place, works when clicked but removes all the data currently in state weirdly : /

from remove value from form within component