Как найти конкретные элементы в массиве в React / Framer?

Question

Я извлекаю результаты из API, например:

  const [state, setState] = React.useState({

        matches: undefined,
        chosenBets: [{}]
      });


        const API = "https://api.myjson.com/bins/i461t"

      const fetchData = async (endpoint, callback) => {
        const response = await fetch(endpoint);
        const json = await response.json();
        setState({ matches: json });
      };

И отрисовываю JSX на его основе с помощью функции map():

export function MatchCardGroup(props) {
  return (
    <div>
      {props.matches.map((match, i) => {
        return (
          <MatchCard
            key={i}
            matchCardIndex={i}
            team_home={match.teams[0]}
            team_away={match.teams[1]}
            league_name={match.sport_nice}
            odd_home={match.sites[0].odds.h2h[0]}
            odd_draw={match.sites[0].odds.h2h[1]}
            odd_away={match.sites[0].odds.h2h[2]}
            onClick={props.onClick}
            timestamp={match.timestamp}
          />
        );
      })}
    </div>
  );
}

У меня тогда естькарта, на которой есть шансы, каждая нечетная с собственным событием щелчка:

export function MatchCard(props) {
  const [state, setState] = React.useState({
    selection: {
      id: undefined
    }
  });

  const {
    timestamp,
    team_home,
    team_away,
    league_name,
    odd_away,
    odd_draw,
    odd_home,
    onClick,
    matchCardIndex,
    selection
  } = props;

  const odds = [
    {
      id: 0,
      label: 1,
      odd: odd_home || 1.6
    },
    {
      id: 1,
      label: "X",
      odd: odd_draw || 1.9
    },
    {
      id: 2,
      label: 2,
      odd: odd_away || 2.6
    }
  ];

  const handleOnClick = (odd, oddIndex) => {
    // need to changhe the selection to prop
    if (state.selection.id === oddIndex) {
      setState({
        selection: {
          id: undefined
        }
      });
      onClick({}, matchCardIndex);
    } else {
      setState({
        selection: {
          ...odd,
          team_home,
          team_away
        }
      });
      onClick({ ...odd, oddIndex, team_home, team_away, matchCardIndex });
    }
  };

  React.useEffect(() => {}, [state, props]);

  return (
    <div style={{ width: "100%", height: 140, backgroundColor: colour.white }}>
      <div>
        <span
          style={{
            ...type.smallBold,
            color: colour.betpawaGreen
          }}
        >
          {timestamp}
        </span>
        <h2 style={{ ...type.medium, ...typography }}>{team_home}</h2>
        <h2 style={{ ...type.medium, ...typography }}>{team_away}</h2>
        <span
          style={{
            ...type.small,
            color: colour.silver,
            ...typography
          }}
        >
          {league_name}
        </span>
      </div>

      <div style={{ display: "flex" }}>
        {odds.map((odd, oddIndex) => {
          return (
            <OddButton
              key={oddIndex}
              oddBackgroundColor={getBackgroundColour(
                state.selection.id,
                oddIndex,
                colour.lime,
                colour.betpawaGreen
              )}
              labelBackgroundColor={getBackgroundColour(
                state.selection.id,
                oddIndex,
                colour.lightLime,
                colour.darkBetpawaGreen
              )}
              width={"calc(33.3% - 8px)"}
              label={`${odd.label}`}
              odd={`${odd.odd}`}
              onClick={() => handleOnClick(odd, oddIndex)}
            />
          );
        })}
      </div>
    </div>
  );
}

В моем App компоненте я регистрирую возвращенный объект из события щелчка:

  const onClick = obj => {
    // check if obj exists in state.chosenBets
    // if it exists, remove from array
    // if it does not exist, add it to the array
    if (state.chosenBets.filter(value => value == obj).length > 0) {
      console.log("5 found.");
    } else {
      console.log(state.chosenBets, "state.chosenBets");
    }
  };

И то, что я хочу сделать, это:

1. Когда пользователь нажимает нечетное из любого данного совпадения, добавьте это нечетное к chosenBets
2. Если пользователь отменяет выбор нечетного, удалитеэто нечетное из chosenBets
3. В любое время можно выбрать только 1 нечетное из каждого из 3 возможных шансов любого совпадения

Бонусные баллы: выбранный нечетный выбран на основеглобальное состояние от App, а не локальное.Это так, если я редактирую массив в другом месте, он должен обновляться в пользовательском интерфейсе.

Любая помощь будет принята с благодарностью, я здесь потерян!

Ссылка на Codesandbox