react-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Okay so the error is when I update my value for tableEntry.color[index], whenever i click on the radiobutton i want to change the value of tableEntry.color[index] to 'grey' if it's orange and vice versa. But my code crashes. Is there any fix for this?

the error happens on function call handleColor. Please tell me if theres anything I can do about it. Thank you!

import { useState, useEffect } from "react";
import "../../styles/slide-styles/slide-four.css";

import DropFileInput from "../drop-file-input/DropFileInput";
import RadioBtnSelector from "../SlideFour/RadioBtnSelector";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";
import RadioBtn from "../SlideFour/RadioBtn";
import { orange, grey } from "@mui/material/colors";
import Radio from "@mui/material/Radio";

const ConfiguratorSlideFour = ({ carousel, getter }) => {
  const onFileChange = (files) => {
    console.log(files);
  };

  const [anzahlCounter, setAnzahlCounter] = useState(1);
  const handleAnzahlChange = (item) => {
    if (item === "-1") {
      if (anzahlCounter > 1) {
        setAnzahlCounter(anzahlCounter - 1);
      }
    } else setAnzahlCounter(anzahlCounter + 1);
  };
  const [tableEntry, setTableEntry] = useState({
    No: [1, 2],
    fileName: ["file1", "file2"],
    format: ["123 x 234", "342 x 112"],
    color: ["grey", "orange"],
    number: ["1", "2"],
    processing: [getter, getter],
    price: [7, 21],
    inTotal: [14, 43],
  });
  const [entry, setEntry] = useState({
    number: 0,
    color: "orange",
    verarb: "",
  });
  useEffect(() => {
    console.log(entry);
  }, [entry]);

  const handleEntry = (item) => {
    if (item === "number") {
      setEntry({ ...entry, number: anzahlCounter });
      handleEntryChange(anzahlCounter, "number");
    } else if (item === "color") {
    } else if (item === "verarb") {
    }
  };

  const handleNumber = (item) => {
    setEntry({ ...entry, number: item });
  };
  const [boolIsEdit, setBoolIsEdit] = useState(false);
  const [indexForMap, setIndexForMap] = useState(0);
  const handleEntryChange = (item, choice) => {
    if (boolIsEdit) {
      if (choice === "number") {
        setTableEntry(
          (perviousState) => (perviousState.number[indexForMap] = item)
        );
      } else if (choice === "color") {
      } else if (choice === "verarb") {
      }
      setBoolIsEdit(!boolIsEdit);
    }
  };

  useEffect(() => {
    setTableEntry((prevState) => ({
      ...prevState,
      processing: [getter, getter],
    }));
  }, [getter]);
  useEffect(() => {
    console.log("color",tableEntry.color);
  }, [tableEntry]);
  //color select states
  const [selectedValue, setSelectedValue] = React.useState("grey");

  const handleChange = (event) => {
    if (event.target.value === "orange") setSelectedValue(event.target.value);
    else setSelectedValue("grey");
  };

  const controlProps = (item) => ({
    checked: selectedValue === item,
    onChange: handleChange,
    value: item,
    name: "color-radio-button-demo",
    inputProps: { "aria-label": item },
  });
  
 //
 const handleColor = (ind,colorCheck) =>{
   
  if(colorCheck==="grey"){
   
   setTableEntry(prevState=>{
    return{
      color: prevState.color[ind]='orange'
    }
   });
   console.log("COLOR UPDATED O to g: ",tableEntry.color);
      
  }
  else{
    setTableEntry(prevState=>{
      return{
        color: prevState.color[ind]='grey'
      }
     });
     console.log("COLOR UPDATED g to O: ",tableEntry.color);
  }
  // else{
  //   setTableEntry((prevState)=> (
  //     prevState.color[ind]="grey"
  //       ))
  // }
}


  return (
    <div className="parent-container">
      <h1> Fourth Slide </h1>
      <Table striped size="sm">
        <thead>
          <tr className="border-top">
            <th>
              <h4>NR.</h4>
            </th>
            <th>
              <h4>Dateiname</h4>
            </th>
            <th>
              <h4>Format</h4>
            </th>
            <th>
              <h4>Farbe</h4>
            </th>
            <th>
              <h4>Anzahl</h4>
            </th>
            <th>
              <h4>Verarb.</h4>
            </th>
            <th>
              <h4>Preis</h4>
            </th>
            <th>
              <h4>Gesamt</h4>
            </th>
          </tr>
        </thead>
        <tbody>
          {tableEntry.No.map((item, index) => {
            return (
              <tr>
                <td>{tableEntry.No[index]}</td>
                <td>{tableEntry.fileName[index]}</td>
                <td>{tableEntry.format[index]}</td>
                <td>
                  {tableEntry.color[index]==='orange' && 
                
                  <Radio
                  {...controlProps("orange")}
                  sx={{
                    color: grey[800],
                    "&.Mui-checked": {
                      color: orange[600],
                    },
                  }}
                  checked={true}
                  onClick={()=>{handleColor(index,tableEntry.color[index])}}
                  
                />
                }
                {tableEntry.color[index]==='grey' && 
                
                <Radio
                {...controlProps("grey")}
                sx={{
                  color: grey[800],
                  "&.Mui-checked": {
                    color: grey[800],
                  },
                }}
                checked={true}
                onClick={()=>{handleColor(index,tableEntry.color[index])}}
                
              />
              }
                </td>
                <td>{tableEntry.number[index]}</td>
                <td>
                  {tableEntry.processing[index] === "Rollen" && (
                    <div className="verarb-row">
                      <h5 style={{ color: "orange" }}>R</h5>
                      <h5 style={{ color: "grey" }}>F</h5>
                      <h5 style={{ color: "grey" }}>L</h5>
                      <h5 style={{ color: "grey" }}>V</h5>
                    </div>
                  )}
                  {tableEntry.processing[index] === "Falten" && (
                    <div className="verarb-row">
                      <h5 style={{ color: "grey" }}>R</h5>
                      <h5 style={{ color: "orange" }}>F</h5>
                      <h5 style={{ color: "grey" }}>L</h5>
                      <h5 style={{ color: "grey" }}>V</h5>
                    </div>
                  )}
                  {tableEntry.processing[index] === "Falten Lochen" && (
                    <div className="verarb-row">
                      <h5 style={{ color: "grey" }}>R</h5>
                      <h5 style={{ color: "orange" }}>F</h5>
                      <h5 style={{ color: "orange" }}>L</h5>
                      <h5 style={{ color: "grey" }}>V</h5>
                    </div>
                  )}
                  {tableEntry.processing[index] ===
                    "Falten Lochen Verstarken" && (
                    <div className="verarb-row">
                      <h5 style={{ color: "grey" }}>R</h5>
                      <h5 style={{ color: "orange" }}>F</h5>
                      <h5 style={{ color: "orange" }}>L</h5>
                      <h5 style={{ color: "orange" }}>V</h5>
                    </div>
                  )}
                </td>
                <td>7,25$</td>
                <td>14,50$</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
      <div className="btmContainer">
        <div className="dropBoxChildContainer">
          <div className="dropBoxContainer">
            <DropFileInput
              className="dropBoxFiles"
              onFileChange={(files) => onFileChange(files)}
              slide="slide4"
            />
          </div>
        </div>
        <RadioBtnSelector className="divRadioBtnSelector" />
        <div className="VerarbCounter">
          <NavigateBeforeIcon
            fontSize="large"
            onClick={() => {
              handleAnzahlChange("-1");
              handleEntry("number");
            }}
          />
          <h4 onChange={() => handleNumber(anzahlCounter)}>{anzahlCounter}</h4>
          <NavigateNextIcon
            fontSize="large"
            onClick={() => {
              handleAnzahlChange("+1");
              handleEntry("number");
            }}
          />
        </div>
        <div className="verarbBtmContainer">
          <h5 style={{ color: "orange" }}>R</h5>
          <h5 style={{ color: "orange" }}>F</h5>
          <h5 style={{ color: "orange" }}>L</h5>
          <h5 style={{ color: "orange" }}>V</h5>
        </div>
        <div className="totalBillContainer">
          <div className="totalBill">
            <h6>Gesamtt Netto: </h6>
            <h6>14$ </h6>
          </div>

          <div className="totalBill">
            <h6>MwSt(19%): </h6>
            <h6>7.22$ </h6>
          </div>

          <div className="totalBill">
            <h6>Gesamt Brutto </h6>
            <h6>45.22$ </h6>
          </div>
        </div>
      </div>

      <button
        className="btn f-right me-2 mt-5 n-button"
        onClick={() => carousel.current.slideNext()}
      >
        {" "}
        Weiter
      </button>
      <button
        className="btn f-right me-2 mt-5 p-button"
        onClick={() => carousel.current.slidePrev()}
      >
        {" "}
        Zurück
      </button>
    </div>
  );
};

export default ConfiguratorSlideFour;