useSWR discard changes on fetched data

apparently I don't quite understand how to work with useSWR and React. I have the following simplified problem:

I fetch data using uswSWR and change the title of this object. If I don't want to save the data and navigate back and to this page again, useSWR shows the old data, with changed title. Although the correct data is fetched (which I can see in the developer console), the function returns the edited object, which I changed before. Everywhere where I use the same useSWR-call, I get the changed object.

How should I work with useSWR in React, what are good practices? Should I make a copy and only change the copy?

Here a code snipped of a shortened example with this problem:

import { useRouter } from "next/router";

import type { NextPage } from 'next';
import offerService from "services/offer.service";
import useSWR from "swr";
import Offer from "types/offer.type";
import { Box, TextField, Typography } from "@mui/material";

const EditOfferPage: NextPage = () => {
  const router = useRouter();
  
  const { offerId } = router.query;

  // loading the offer object using SWR
  const { data: offer, error } = useSWR<Offer>(
    "getOfferById", () => offerService.getOfferById(parseInt(String(offerId))).then((res) => res.data)
  );
  
  if (error) return <Typography>Error</Typography>;
  if (!offer) return <Typography>Loading...</Typography>;

  const handleChange = (event:  React.ChangeEvent<HTMLInputElement>) => {
    // changing title of offer object
    offer.title = event.target.value;
  }

  return (
    <Box>
      <TextField
            id="test-textfield"
            value={offer.title}
            onChange={handleChange}
          />
    </Box>
  );
};

export default EditOfferPage;

In

useSWR<Offer>(
  "getOfferById",
  () => offerService.getOfferById(parseInt(String(offerId))).then((res) => res.data)
  );

you're using the same cache key getOfferById even if the result varies over offerId.

Do e.g.

useSWR<Offer>(
  `getOfferById/${offerId}`,
  () => offerService.getOfferById(parseInt(String(offerId))).then((res) => res.data)
);

or better yet use an array key and have the fetcher function know what to do:

function fetchOfferById([_, offerId]) {
  return offerService.getOfferById(parseInt(String(offerId))).then((res) => res.data);
}

// ...

useSWR<Offer>(['getOfferById', offerId], fetchOfferById);

The problem you are facing is with revalidating the data

I recommend you go through the below resources:

https://swr.vercel.app/docs/revalidation

https://koba04.medium.com/revalidating-options-of-swr-4d9f08bee813