Not able to see the updated values in react after creating a group

JavaScript
1

I am trying to perform a simple exercise, wherein I am showing the data from the local JSON file saved in my folder, and then reading it to show the data with useSate, such that when a user clicks in he can edit the author and location filed and save it.

The issue I get is when I save the data in my group or location it does not populate the new value, however, it just removes the new value, but when I filter and select all values from the dropdown I can see the values in there.

Can anyone please let me know what is the missing part here? I want to achieve the task that when a user updates the value on the author group or location group they should be there with the new group value.

Please the link to the code below and a working demo on codeSandbox

watch the full code and demo here

The source code for author group component I tried so far ;

    import { useEffect, useState } from "react";
import {
  Container,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
  Button
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import EditIcon from "@mui/icons-material/Edit";

const Authorsgroup = ({
  posts,
  groupDropdownValue,
  setShowForm,
  setPostId,
  showForm
}) => {


  const authorGroup = posts.reduce((group, authorgroup) => {
    (group[authorgroup.author.replace(/ +/g, "")] =
      group[authorgroup.author.replace(/ +/g, "")] || []).push(authorgroup);
    return group;
  }, {});

  const [authorGroupValues, setAuthorGroupValues] = useState(authorGroup);

  useEffect(() => {
    setAuthorGroupValues(authorGroup);
    console.log(authorGroupValues);
  }, [groupDropdownValue, showForm]);

  return (
    <>
      {/* all gorupby authors  */}

  <Container>
    {/* show group of Tapesh */}
    <Container style={{ marginTop: "3rem" }}>
      {authorGroupValues?.Tapesh.map((post, index) => (
        <Accordion key={index}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography variant="h6" style={{ color: "#EB1283" }}>
              {post.id} {post.author} {post.location}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="h4">{post.location}</Typography>
            <Typography>{post.text}</Typography>
            <Button
              variant="outlined"
              onClick={() => {
                setShowForm(!showForm);
                setPostId(post.id);
              }}
              startIcon={<EditIcon />}
            >
              Edit
            </Button>
          </AccordionDetails>
        </Accordion>
      ))}
    </Container>

    {/* show group of HappyManager */}
    <Container style={{ marginTop: "3rem" }}>
      {authorGroupValues?.HappyManager.map((post, index) => (
        <Accordion key={index}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography variant="h6" style={{ color: "orange" }}>
              {post.id} {post.author} {post.location}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="h4">{post.location}</Typography>
            <Typography>{post.text}</Typography>
            <Button
              variant="outlined"
              onClick={() => {
                setShowForm(!showForm);
                setPostId(post.id);
              }}
              startIcon={<EditIcon />}
            >
              Edit
            </Button>
          </AccordionDetails>
        </Accordion>
      ))}
    </Container>

    {/* show group of HappyDeveloper */}
    <Container style={{ marginTop: "3rem" }}>
      {authorGroupValues?.HappyDeveloper.map((post, index) => (
        <Accordion key={index}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography variant="h6" style={{ color: "green" }}>
              {post.id} {post.author} {post.location}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="h4">{post.location}</Typography>
            <Typography>{post.text}</Typography>
            <Button
              variant="outlined"
              onClick={() => {
                setShowForm(!showForm);
                setPostId(post.id);
              }}
              startIcon={<EditIcon />}
            >
              Edit
            </Button>
          </AccordionDetails>
        </Accordion>
      ))}
    </Container>

    {/* show group of HappyUser */}
    <Container style={{ marginTop: "3rem" }}>
      {authorGroupValues?.HappyUser.map((post, index) => (
        <Accordion key={index}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography variant="h6" style={{ color: "red" }}>
              {post.id} {post.author} {post.location}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography variant="h4">{post.location}</Typography>
            <Typography>{post.text}</Typography>
            <Button
              variant="outlined"
              onClick={() => {
                setShowForm(!showForm);
                setPostId(post.id);
              }}
              startIcon={<EditIcon />}
            >
              Edit
            </Button>
          </AccordionDetails>
        </Accordion>
      ))}
    </Container>
  </Container>
</>
  );
};

export default Authorsgroup;

Thanks any suggestions or help is really appreciated.