[React] 動的なTableにおけるセレクトボックスで選択済みの選択肢を消したい

Question

やりたいこと

行を追加したり削除する動的なテーブルでセレクトボックスの選択肢を一度使ったら別の行では使えないようにしたい

使っているライブラリなど

行の追加、削除のテーブル部分はFormikというライブラリを使って実装しています。

試行錯誤

セレクトボックスを選択したら配列のpopで配列から消すロジックを考えましたが、実装できませんでした。
「Apple」と「Rice」は画面描画時に自動的に選んでおきたいので、initialValuesで初期値として設定しています。
セレクトボックスの選択肢から省けば良いかと思いましたが、省くと描画時に選択できません。

ソースコード

import React from "react";
import { Formik, Form, FieldArray } from "formik";

// Material UI
import { makeStyles } from "@material-ui/core/styles";
...(省略)
import * as yup from "yup";

const useStyles = makeStyles((theme) => ({
  header: {
...(省略)
}));

const validationSchema = yup.object().shape({
  data: yup.array().of(
	yup.object().shape({
	  code: yup.object().typeError("Please select a code"),
	  free: yup.string().required("Please select free option"),
	  additionalPrice: yup.string().required("Please enter additional price")
	})
  )
});

const codes = [
  { id: 1, name: "Banana", desc: "Desc 1", price: 100 },
  { id: 2, name: "Grape", desc: "Desc 2", price: 200 },
  { id: 3, name: "Orange", desc: "Desc 3", price: 300 },
  { id: 4, name: "Apple", desc: "Required", price: 500 },
  { id: 5, name: "Rice", desc: "Required", price: 500 }
];
const foodOptions = ["Banana", "Grape", "Orange", "Apple", "Rice"];
const freeOptions = ["Yes", "No"];

const initialValues = {
  data: [
	{
	  code: "Apple",
	  free: "No",
	  additionalPrice: 0
	},
	{
	  code: "Rice",
	  free: "No",
	  additionalPrice: 0
	}
  ]
};

const Reports = () => {
  const classes = useStyles();

  return (
	<div>
	  <Grid container direction="row">
		<Grid item lg={12} md={12} xs={12}>
		  <Card>
			<CardHeader
			  className={classes.header}
			  title={"Report"}
			  classes={{
				title: classes.header
			  }}
			/>
			<Divider />
			<CardContent>
			  <Formik
				initialValues={initialValues}
				onSubmit={(values) => {
				  console.log(values.data);
				}}
				validationSchema={validationSchema}
			  >
				{({
				  values,
				  handleChange,
				  setFieldValue,
				  errors,
				  handleBlur,
				  touched
				}) => {
				  return (
					<Form>
					  <FieldArray name="data">
						{({ insert, remove, push }) => (
						  <Paper>
							<TableContainer>
							  <Table stickyHeader>
								<TableHead>
								  <TableRow>
									<TableCell>Code - (Description)</TableCell>
									<TableCell>Free</TableCell>
									<TableCell>Price</TableCell>
									<TableCell>Additional Price</TableCell>
									<TableCell>Actions</TableCell>
								  </TableRow>
								</TableHead>
								<TableBody>
								  {values.data.map((record, idx) => {
									return (
									  <TableRow key={idx} hover>
										<TableCell>
										  <Select
											onBlur={handleBlur}
											labelId="demo-simple-select-outlined-label"
											label="Foods"
											name={`data.${idx}.code`}
											onChange={handleChange}
											value={
											  values.data[idx] &&
											  values.data[idx].code
												? values.data[idx].code
												: ""
											}
										  >
											{foodOptions.map((item) => (
											  <MenuItem key={item} value={item}>
												{item}
											  </MenuItem>
											))}
										  </Select>
										</TableCell>
										<TableCell>
										  <FormControl
											variant="outlined"
											className={classes.formControl}
											error={Boolean(
											  touched.data &&
												touched.data[idx] &&
												touched.data[idx].free &&
												errors.data &&
												errors.data[idx] &&
												errors.data[idx].free
											)}
										  >
											<InputLabel id="demo-simple-select-outlined-label">
											  Free
											</InputLabel>
											<Select
											  onBlur={handleBlur}
											  labelId="demo-simple-select-outlined-label"
											  label="Free"
											  name={`data.${idx}.free`}
											  onChange={handleChange}
											  value={
												values.data[idx] &&
												values.data[idx].free
												  ? values.data[idx].free
												  : ""
											  }
											>
											  {freeOptions.map((item) => (
												<MenuItem
												  key={item}
												  value={item}
												>
												  {item}
												</MenuItem>
											  ))}
											</Select>
											{touched.data &&
											touched.data[idx] &&
											touched.data[idx].free &&
											errors.data &&
											errors.data[idx] &&
											errors.data[idx].free ? (
											  <FormHelperText>
												{errors.data[idx].free}
											  </FormHelperText>
											) : null}
										  </FormControl>
										</TableCell>
										<TableCell>
										  {values.data[idx] &&
										  values.data[idx].code
											? values.data[idx].code.price
											: 0}
										</TableCell>
										<TableCell>
										  <TextField
											label="Additional Price"
											type="number"
											variant="outlined"
											placeholder="0"
											name={`data.${idx}.additionalPrice`}
											value={
											  values.data[idx] &&
											  values.data[idx].additionalPrice
											}
											onChange={handleChange}
											onBlur={handleBlur}
											error={Boolean(
											  touched.data &&
												touched.data[idx] &&
												touched.data[idx]
												  .additionalPrice &&
												errors.data &&
												errors.data[idx] &&
												errors.data[idx].additionalPrice
											)}
											helperText={
											  touched.data &&
											  touched.data[idx] &&
											  touched.data[idx]
												.additionalPrice &&
											  errors.data &&
											  errors.data[idx] &&
											  errors.data[idx].additionalPrice
												? errors.data[idx]
													.additionalPrice
												: ""
											}
										  />
										</TableCell>
										<TableCell>
										  <Button
											variant="contained"
											color="secondary"
											onClick={() => {
											  remove(idx);
											}}
										  >
											Remove
										  </Button>
										</TableCell>
									  </TableRow>
									);
								  })}
								  <TableRow>
									<TableCell>Total</TableCell>
									<TableCell></TableCell>
									<TableCell></TableCell>
									<TableCell></TableCell>
									<TableCell>
									  {values.data.reduce((total, curVal) => {
										if (!curVal.code) {
										  return total;
										}
										if (curVal.free === "Yes") {
										  return total;
										}
										return (
										  total +
										  curVal.code.price +
										  (curVal.additionalPrice || 0)
										);
									  }, 0)}
									</TableCell>
								  </TableRow>
								</TableBody>
							  </Table>
							</TableContainer>
							<Box>
							  <Button
								variant="contained"
								color="primary"
								onClick={() =>
								  push({
									code: null,
									free: "No",
									additionalPrice: 0
								  })
								}
							  >
								Add Row
							  </Button>
							</Box>
							<Box display="flex" flexDirection="row-reverse">
							  <Button
								variant="contained"
								color="primary"
								type="submit"
							  >
								Save
							  </Button>
							</Box>
						  </Paper>
						)}
					  </FieldArray>
					</Form>
				  );
				}}
			  </Formik>
			</CardContent>
		  </Card>
		</Grid>
	  </Grid>
	</div>
  );
};

export default Reports;

よろしくお願いいたします。