I am trying to set the state of of a an object (teethData.data) in react based on the props passed into the component (props.toothData). if the props passed object has length zero then it sets. If props.toothData is length zero then a default value is given to a variable givenToothData so that teethData.data has a default value otherwise, teethData.data is just set to props.toothData. However teethData.data doesn't change the way i want it too if props.ToothData isn't length zero

Below is my code, is there any advice?

function TableArray(props) {
  const navigate = useNavigate();
  console.log(props.toothData);

  var givenToothData = props.toothData;
  if (Object.keys(props.toothData).length === 0) {
    console.log("this happened", props.toothData);
    givenToothData = {
      1: {
        pp: false,
        C14: false,
        GI0: false,
        GI23: false,
        PDI: false,
        GR: false,
        F13: false,
        M03: false,
      },
      2: {
        AB: false,
        AT: false,
        EH: false,
        TI: false,
        TLUX: false,
        O: false,
        GH: false,
        OST: false,
        ONF: false,
        FX: false,
        CA: false,
        OM: false,
        D: false,
        DX: false,
      },
      3: { RTR: false, TR: false, SN: false, TA: false },
      4: {
        TFXUCF: false,
        TFXCCF: false,
        TFXUCRF: false,
        TNE: false,
        TPE: false,
      },
    }
    console.log("this happened", givenToothData);
  }

  const [teethData, setTeethData] = useState({
    tooth: props.tooth,
    data: givenToothData
  });

  console.log(teethData.data, "runthisfirst \n", givenToothData, props.teethData);