lifting state up from child to parent, resets my parents states - reactjs

Question

when I lift the state up to a parent it resets all my states in the parent component.
Parent Component
const [validName, setValidName] = useState(false);
const [validAddress, setValidAddress] = useState(false);
const [validPostal, setValidPostal] = useState(false);
const [validPhone, setValidPhone] = useState(false);
const [validEmail, setValidEmail] = useState(false);
const [validForm, setValidForm] = useState(false);
const isDisabled = (pWidth, pLength) => {
console.log("pWidth: " + pWidth);
console.log("pLength: " + pLength);
setSheetSize(pWidth, pLength);
console.log("in isDisabled!");
console.log(validName);
console.log(validAddress);
console.log(validPostal);
console.log(validPhone);
console.log(validEmail);
validateForm();
};
const setSheetSize = (width, length) => {
console.log("setSheetSize width: " + width);
console.log("setSheetSize length: " + length);
setLength(length);
setWidth(width);
};
const setRadiusSize = (radius) => {
setRadius(radius);
};
const [selectedOption, setSelectOption] = useState(
<SheetForm isDisabled={isDisabled} />
);
return (
<Col md={3}>
<div className="form-check mt-4">
<input
className="form-check-input"
type="radio"
name="cakeType"
id="sheet"
value="sheet"
checked={checkOption === "sheet"}
onClick={(e) => {
setCheckOption(e.target.value);
setSelectOption(<SheetForm isDisabled={isDisabled} />);
}}
/>
<label className="form-check-label" htmlFor="sheet">
Sheet Cake
</label>
</div>
</Col>
)
Child Component
import { useState } from "react";
const SheetForm = (props) => {
const [innerLength, setInnerLength] = useState();
const [innerWidth, setInnerWidth] = useState();
let isLengthGood = false;
let isWidthGood = false;
function validateSheetSize() {
if (innerLength >= 30 && innerLength <= 60) {
document.getElementById("length").classList.add("is-valid");
document.getElementById("length").classList.remove("is-invalid");
isLengthGood = true;
} else {
document.getElementById("length").classList.remove("is-valid");
document.getElementById("length").classList.add("is-invalid");
}
if (innerWidth >= 30 && innerWidth <= 45) {
document.getElementById("width").classList.add("is-valid");
document.getElementById("width").classList.remove("is-invalid");
isWidthGood = true;
} else {
document.getElementById("width").classList.remove("is-valid");
document.getElementById("width").classList.add("is-invalid");
}
if (isLengthGood && isWidthGood) {
console.log("everything good");
props.isDisabled(innerWidth, innerLength);
}
}
return (
<div id="sheetOption" className="mt-4">
<div className="input-group">
<span className="input-group-text">Sheet Size</span>
<input
onBlur={validateSheetSize}
id="length"
type="text"
aria-label="length"
className="form-control"
placeholder="min 30 max 60"
name="length"
min="30"
max="60"
required
onChange={(e) => {
setInnerLength(e.target.value);
}}
/>
<span className="input-group-text" id="basic-addon1">
L (cm)
</span>
<div className="valid-feedback">Looks good!</div>
<div className="invalid-feedback">
Length must be between 30cm and 60cm!
</div>
</div>
<div className="input-group">
<span className="input-group-text">Sheet Size</span>
<input
onBlur={validateSheetSize}
id="width"
type="text"
aria-label="width"
className="form-control"
placeholder="min 30 max 45"
name="width"
min="30"
max="45"
required
onChange={(e) => {
setInnerWidth(e.target.value);
}}
/>
<span className="input-group-text" id="basic-addon1">
W (cm)
</span>
<div className="valid-feedback">Looks good!</div>
<div className="invalid-feedback">
Width must be between 30cm and 45cm!
</div>
</div>
</div>
);
};
export default SheetForm;
I can lift the state back up to the parent and get the correct values, but when I check the states for validName, validAddress, validPostal, etc...
they all come back to the original setState of false.