Handling updates in ReactJS - reactjs

Question

I'm making an application in which the user has the ability to decide if his creations are active or inactive, and the API route responsible for that is
(I'm using NextJs API routes)
import { NextApiRequest, NextApiResponse } from "next";
import { decryptCookie } from "../../../lib/cookie";
import { prisma } from "../../../lib/prisma";
interface User {
email: string;
issuer: string;
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
if (req.method !== "PUT") return res.status(405).end;
let userFromCookie: User;
try {
userFromCookie = await decryptCookie(req.cookies.auth);
if (!userFromCookie.email) {
throw new Error("Cannot find user. Unable to proceed with creation.");
}
const userEmail = userFromCookie.email;
const active = JSON.parse(req.body);
const userInDb = await prisma.user.findOne({
where: {
email: userEmail,
},
});
const response = await prisma.brainstorm.update({
data: {
active,
},
where: {
id: userInDb.id,
},
});
res.status(201).json({ response });
} catch (error) {
return res.status(500).end(error.message);
}
};
the components that contain this action receives it's data as props from a map method in a parent component
I'll put in here the whole component, but you guys can worry about the Switch that indicates the activeness and the function responsible for the change.
import React, { useState, useEffect } from "react";
import Switch from "react-switch";
import {
Container,
BrainstormInfo,
BrainstormTitle,
Active,
Group,
StormPieces,
} from "./styles";
import { Brainstorm } from "../../pages/user-dashboard";
import useFormatDate from "../../hooks/useFormatDate";
import produce from "immer";
interface Props {
brainstormData: Brainstorm;
}
const UserBrainstormCard: React.FC<Props> = ({ brainstormData }) => {
if (!brainstormData) return <h1>Loading...</h1>;
const [active, setActive] = useState(brainstormData.active);
const formatedDate = useFormatDate(
(brainstormData.createdAt as unknown) as string
);
async function handleActiveness() {
setActive(!active);
const response = await fetch("/api/brainstorm/update", {
method: "PUT",
body: JSON.stringify(active),
});
const data = await response.json();
setActive(data.response.active);
}
return (
<Container>
<BrainstormInfo>
<p>Brainstorm</p>
<p>{formatedDate}</p>
</BrainstormInfo>
<BrainstormTitle>
<h3>{brainstormData.title}</h3>
</BrainstormTitle>
<Active>
<Group>
<p>Active:</p>
<Switch
offHandleColor="#eee"
onHandleColor="#eee"
draggable={false}
onChange={handleActiveness}
checked={active}
checkedIcon={false}
uncheckedIcon={false}
height={15}
width={30}
handleDiameter={20}
offColor="#f13030"
onColor="#2dea8f"
/>
</Group>
<StormPieces>
<p>
{brainstormData.stormPieces.length}
{` `}Stormpieces
</p>
</StormPieces>
</Active>
</Container>
);
};
export default UserBrainstormCard;
The call to the API happens, but when I update the page it all goes back to what the value it was initially.
I'm pretty sure that the problem has to do with state, and that I should find a way to insert this values in the state. But I don't know a clear path on how to do it