javascript - Add data in a specific proprety of object

Question

I have this application: https://codesandbox.io/s/misty-smoke-n5f1e?file=/Person.js:123-1128
The idea of the application is next:

1. Near each person is a select tag with their genre.
2. Every person should be able to assign it self to the specific toy, selecting an option. ex: Carl can assign his self only to toyType: "M", by selecting M from select, and after selecting i should get the next data:

    0: Object
    color: "red"
    toyType: "M"
    persons: Array[1]
              0: Object
              name: "Carl"
              age: 17
    1: Object
    color: "white"
    toyType: "F"

3. If another user clicks on M also his name and age should be added in persons array from above.
4. Disabled are options that not coresponds with the type proprety of person; EX: Lisa has M dissabled bicause her type is not M but F;
5. Each person can add it self to a specific toy just one time not twice.
   

    const Person = ({ person, k }) => {
      // console.log(person)
      const thisPerson = { name: person.name, age: person.age };
      function handleChange(value) {
        console.log(`selected ${value}`);
        const result = toys.map((i) => {
          if (value === i.toyType) {
            return {
              ...i,
              persons: toys.persons ? [...i.persons, thisPerson] : [thisPerson]
            };
          } else {
            return { ...i };
          }
        });
        console.log("result", result);
        return result;
      }
      return (
        <div>
          <Select
            placeholder="select"
            style={{ width: 120 }}
            onChange={handleChange}
          >
            {toys.map((i, k) => (
              <Option
                disabled={
                  i.toyType.toLocaleLowerCase() !== person.type.toLocaleLowerCase()
                }
                key={k}
                value={i.toyType}
              >
                {i.toyType}
              </Option>
            ))}
          </Select>
          <span>{person.name}</span>
        </div>
      );
    };
    export default Person;

Here,

    if (value === i.toyType) {
            return {
              ...i,
              persons: toys.persons ? [...i.persons, thisPerson] : [thisPerson]
            };
          } else {
            return { ...i };
          }

...i try to implement the functionality where users can assign their self to a specific toy, but appaers an issue when another user wants to add his self to one toy where exist already a person, because the previous person dissapears and insted of him appears the last, but i need to have an array of persons.
Also i cant figure out how to prohibit users to asssign their selfs twice to the same toy. Question: Who knows how to solve the issues? Thanks

Answer 1

Waitting for answers