React form not showing default values after rerender

I have a scenario where my react-hook-form is not loading default values. These default values become available after a localStorage check that occurs inside a UseEffect() resulting in a state change to set the default values (unuploadedShoeData). However, this is not reflected in the form on rerender.

The form definitely works for default values as if the default values are available prior to the initial form render (such as by hard coding the values) then these can be seen in the form when first rendered. In addition, I am logging unuploadedShoeData and can see that it is being set correcty. It seem's like the form isn't rerendering for some reason.

Here is the code:

> const ShoeUpload = ({
> edit = false,
> user,
> setShoes,
> shoeOptions,
> api,
> shoes,
> }) => {
> const classes = useStyles();
> const navigate = useNavigate();
> const { id } = useParams();
> const [loading, setLoading] = useState(false);
> const [unuploadedShoeData, setUnuploadedShoeData] = useState(null);
>
> const UNUPLOADED_SHOE_DATA_KEY = "unuploadedShoeData";
>
> const shoe = edit
> ? shoes.filter((shoe) => shoe.id === parseInt(id)).pop()
> : unuploadedShoeData ?? null;
>
> console.log("shoe", shoe);
>
> useEffect(() => {
> const shoeData = >localStorage.getItem(UNUPLOADED_SHOE_DATA_KEY);
> if (shoeData) {
> setUnuploadedShoeData(JSON.parse(shoeData));
> }
> }, []);
>
> const _storeUnuploadedShoeData = (shoeData) => {
> const toStore = {
> brand: shoeData.brand.value,
> condition: shoeData.condition,
> foot: shoeData.foot.value,
> gender: shoeData.gender.value,
> icon: shoeData.icon,
> images: shoeData.images,
> price: shoeData.price,
> size: shoeData.size.value,
> };
> localStorage.setItem(UNUPLOADED_SHOE_DATA_KEY, JSON.stringify(toStore));
> };
>
> const uploadShoe = (data) => {>
> if (unuploadedShoeData) {
> localStorage.removeItem(UNUPLOADED_SHOE_DATA_KEY);
> }
>
> setLoading(true);
> api
> .createShoe(
> user.id,
> data.brand.value,
> data.icon,
> data.foot.value,
> data.gender.value,
> data.size.value,
> data.condition,
> data.price,
> data.images
> )
> .then((shoe) => {
> setLoading(false);
> setShoes((prevShoes) => [...prevShoes, shoe]);
> Analytics.uploadShoe(shoe);
> navigate(/shoes/${shoe.id});
> });
> };
>
> const editShoe = (data) => {
> setLoading(true);
> api
> .editShoe(
> shoe.id,
> data.brand.value,
> data.icon,
> data.foot.value,
> data.gender.value,
> data.size.value,
> data.condition,
> data.price,
> data.images,
> shoe.images
> )
> .then((shoe) => {
> setShoes((prevShoes) =>
> prevShoes.map((prevShoe) =>
> prevShoe.id === shoe.id ? shoe : prevShoe
> )
> );
> setLoading(false);
> navigate(/shoes/${shoe.id});
> });
> };
>
> const fields = [
> {
> name: "brand",
> label: "Shoe Brand",
> required: true,
> component: "autocomplete",
> options: shoeOptions?.brand,
> initial: shoe
> ? shoeOptions?.brand
> ?.filter((brand) => brand.value === shoe.brand)
> .pop()
> : null,
> },
> {
> name: "icon",
> label: "Shoe Icon",
> required: true,
> initial: shoe ? shoe.icon : null,
> },
> {
> name: "foot",
> label: "Foot",
> required: true,
> component: "autocomplete",
> options: shoeOptions?.foot,
> initial: shoe
> ? shoeOptions?.foot?.filter((foot) => foot.value === shoe.foot).pop()
> : null,
> },
> {
> name: "gender",
> label: "Gender",
> required: true,
> component: "autocomplete",
> options: shoeOptions?.gender,
> initial: shoe
> ? shoeOptions?.gender
> ?.filter((gender) => gender.value === shoe.gender)
> .pop()
> : null,
> },
> {
> name: "size",
> label: "Size (UK)",
> required: true,
> component: "autocomplete",
> options: shoeOptions?.size,
> initial: shoe
> ? shoeOptions?.size?.filter((size) => size.value === shoe.size).pop()
> : null,
> },
> {
> name: "price",
> label: "Price (£)",
> required: true,
> type: "number",
> initial: shoe ? shoe.price : null,
> },
> {
> name: "condition",
> label: "Condition",
> required: true,
> multiline: true,
> initial: shoe ? shoe.condition : null,
> },
> {
> name: "images",
> label: "Images",
> required: true,
> component: "imageUpload",
> acceptedFiles: ["image/jpeg", "image/png"],
> filesLimit: 6,
> initial: shoe ? shoe.images?.map((image) => image.image) : null,
> },
> ];
>
> return (
> <div>
> {loading ? (
> <Grid
> container
> justifyContent="center"
> alignItems="center"
> direction="column"
> minHeight="80vh"
> >
> <Grid item xs={12} my={2}>
> <Typography variant="body1">Just a second...</Typography>
> </Grid>
> <Grid item xs={12}>
> <CircularProgress />
> </Grid>
> </Grid>
> ) : (
> <Box container className={classes.container}>
> <Card variant="outlined" className={classes.card}>
> <CardContent>
> <Typography variant="h6" component="h1" textAlign="center" mb={2}>
> {edit ? "Edit shoe" : "Upload a shoe to sell"}
> </Typography>
> <Form
> fields={fields}
> onSubmit={edit ? editShoe : uploadShoe}
> submitButtonText={edit ? "Update" : "Sell"}
> />
> </CardContent>
> </Card>
> </Box>
> )}
> </div>
> );
> };
>
> export default ShoeUpload;

Try to put some console.log statements like for shoeData and see if the data is what you really expect. This is probably cause the data is something unexpected or there is not any at all. It would help to see more though, like what the component is returning and how it is manipulating the ShoeData.