I am relatively new to full stack development and I am currently working on a project to enhance my understanding of frontend development with React JS. While working on this project, I have been using Redux without any issues so far. However, I am facing an obstacle in writing a list of fields from a Firebase document that I can edit based on the existing data and then send it back to the server. The problem is, each TextField and Select component does not update their values as expected:

class PostDialog extends Component {
  state = {
    open: false,
    oldPath: '',
    newPath: '',
    Code:"",
    barrCode:"",
    color:"",
    size:"",
    qnt:"",
    brand:"",
    cat:"",
    price:"",
    createdAt:"",
    descr:"",
    errors:{}
  };
  componentDidMount() {
    if (this.props.openDialog) {
      this.handleOpen();
    }
  }
  handleOpen = () => {
    let oldPath = window.location.pathname;

    const { userHandle, postId } = this.props;
    const newPath = `/inv/${postId}`;

    if (oldPath === newPath) oldPath = `/inv`;

    window.history.pushState(null, null, newPath);

    
    this.props.getPost(this.props.postId);
    this.setState({ open: true, oldPath, newPath, size: this.props.size });
  };
  handleClose = () => {
    window.history.pushState(null, null, this.state.oldPath);
    this.setState({ open: false });
    this.props.clearErrors();
  };

  handleChange=(event)=>{
    this.setState({[event.target.name]: event.target.value})
  };
  onTodoChange(value){
    this.setState({
      barrCode: value
    });
}
  render() {
    const {errors} = this.state;
    const {
      classes,
      post: {
        postId,
        Code, barrCode, color,size,qnt,brand,cat,price,createdAt,descr,available
      },
      UI: { loading }
    } = this.props;


    const ITEM_HEIGHT = 48;
        const ITEM_PADDING_TOP = 8;
        const MenuProps = {
            PaperProps: {
              style: {
                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
                width: 250,
              },
            },
        };

    const dialogMarkup = loading ? (
      <div className={classes.spinnerDiv}>
        <CircularProgress size={200} thickness={2} />
      </div>
    ) : (
      <Grid container spacing={16}>
        <Grid item sm={7}>
          <hr className={classes.invisibleSeparator} />
          <Typography variant="body2" color="textSecondary">
            {dayjs(createdAt).format('h:mm a, MMMM DD YYYY')}
          </Typography>
          <hr className={classes.invisibleSeparator} />
          <TextField
                                name="barrCode"
                                type="text"
                                label="Codice a Barre"
                                placeholder="111111111"
                                rows="1"
                                error={errors.barrCode ? true : false}
                                helperText={errors.barrCode}
                                className={classes.TextField}
                                value={barrCode}
                                onChange={this.handleChange}
                                fullWidth
                            />
                            <TextField
                                name="price"
                                type="text"
                                label="Prezzo"
                                placeholder="111111111"
                                rows="1"
                                error={errors.price ? true : false}
                                helperText={errors.price}
                                className={classes.TextField}
                                value={price}
                                onChange={this.handleChangePrice}
                                fullWidth
                            />
                            <Box display="flex" flexDirection="row">
                              <Box>
                              <InputLabel id="brand">Marca</InputLabel>
                                        <Select
                                            labelId="Marca"
                                            id="brand"
                                            value={brand}
                                            onChange={this.brandChange}
                                            input={<Input />}
                                            MenuProps={MenuProps}
                                        >
                                        {brands.map((brand) => (
                                            <MenuItem value={brand}>
                                            {brand}
                                            </MenuItem>
                                        ))}
                                        </Select>
                              </Box>
                              <Box>
                              <InputLabel id="cat">Categoria</InputLabel>
                                        <Select
                                            labelId="Marca"
                                            id="cat"
                                            value={cat}
                                            onChange={this.catChange}
                                            input={<Input />}
                                            MenuProps={MenuProps}
                                        >
                                        {cats.map((cat) => (
                                            <MenuItem value={cat}>
                                            {cat}
                                            </MenuItem>
                                        ))}
                                        </Select>
                              </Box>
                              
                            </Box>
                            
                             
        </Grid>
        <hr className={classes.visibleSeparator} />
        <DeletePost postId={postId} />
          {/* <CommentForm postId={postId} /> */}
          {/* <Comments comments={comments} /> */ 
      </Grid>
    );
    return (
      <Fragment>
        <MyButton
          onClick={this.handleOpen}
          tip="Modifica"
          tipClassName={classes.expandButton}
        >
          <UnfoldMore color="primary" />
        </MyButton>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          fullWidth
          maxWidth="sm"
        >
          <MyButton
            tip="Close"
            onClick={this.handleClose}
            tipClassName={classes.closeButton}
          >
            <CloseIcon />
          </MyButton>
          <DialogContent className={classes.dialogContent}>
            {dialogMarkup}
          </DialogContent>
        </Dialog>
      </Fragment>
    );
  }
}

PostDialog.propTypes = {
  clearErrors: PropTypes.func.isRequired,
  getPost: PropTypes.func.isRequired,
  postId: PropTypes.string.isRequired,
  post: PropTypes.object.isRequired,
  UI: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
  post: state.data.post,
  UI: state.UI
});

const mapActionsToProps = {
  getPost,
  clearErrors
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(withStyles(styles)(PostDialog));

I am seeking guidance on how to resolve this issue. Can anyone provide suggestions on what steps to take next?