React prop value changing though it is readonly - reactjs

Question

I have a parent component - RoomSettings.tsx where I am passing a prop, room to a child component RoomSettingsStreams
RoomSettings.tsx
export default function RoomSettings() {
const { id } = useParams() as { id: string };
const [room, setRoom] = useState<Room | null>({
streams: [
{
name: "Somthing",
other: "Others",
},
{
name: "Somtehing 2",
others: "Sasdfasd",
},
],
});
return (
<div className="h-screen flex overflow-hidden bg-slate">
<RoomSettingsStreams initStreams={room ? [...room.streams] : []} />
</div>
);
}
RoomSettingStreams.tsx
interface RoomSettingsStreamsProps {
initStreams: Stream[] | null;
}
interface Stream {
name: string;
other: string;
}
export default function RoomSettingsStreams({
initStreams,
}: RoomSettingsStreamsProps) {
const [init, setInit] = useState<Stream[]>([]);
const [streams, setStreams] = useState<Stream[]>([]);
const [token, setToken] = useState("");
const [edit, setEdit] = useState(false);
const [message, setMessage] = useState({
message: "",
show: false,
type: "error",
});
const editRoom = () => {};
useEffect(() => {
if (initStreams) {
setStreams([...initStreams]);
setInit([...initStreams]);
}
}, [initStreams]);
return (
<div className="bg-card rounded-lg border border-gray-800">
{streams.map((e, i) => {
return (
<div className="p-6 pb-10 sm:mt-5 space-y-6 sm:space-y-5" key={i}>
<div className="flex">
<StreamLabel text={`Stream ${i + 1}`} />
</div>
{/* Item */}
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
<div>
<SettingsLabel text="Stream Title" />
</div>
<div className="mt-2 sm:mt-0 col-span-2">
{edit ? (
<Input
className="text-gray-200"
type="text"
placeholder="Enter stream title"
value={e.stream_title}
onChange={(f) => {
const newStreams = streams.map((e, j) => {
if (i === j) e.name = f.currentTarget.value;
return e;
});
setStreams([...newStreams]);
}}
/>
) : (
<p className="text-gray-200">{e.name}</p>
)}
</div>
<div className="mt-1 sm:mt-0 sm:col-span-2"></div>
</div>
{/* Item */}
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
<div>
<SettingsLabel text="Publishing Method" />
</div>
<div className="mt-2 sm:mt-0 col-span-2">
{edit ? (
<Listbox
options={["OBS-WebRTC", "Browser", "RTMP"]}
selected={e.other}
setSelected={(f: any) => {
const newStreams = streams.map((e, j) => {
if (i === j) e.other = f;
return e;
});
setStreams([...newStreams]);
}}
/>
) : (
<p className="text-gray-200">{e.publishing_method}</p>
)}
</div>
{/* OBS-WebRTC Keys */}
<SettingsLabel text="OBS Stream Name" />
<div className="mt-1 sm:mt-0 sm:col-span-2">
<InputClipboard
className="text-blue-brand"
type="text"
placeholder=""
value={e.name}
onClick={() => {
navigator.clipboard.writeText(e.name);
}}
readOnly={true}
/>
</div>
</div>
</div>
);
})}
<div className="p-6">
<AddItem text="Add another stream" />
</div>
<RoomSettingsEditButton
edit={edit}
setEdit={setEdit}
onCancel={() => {
setEdit(false);
if (!init) return;
setStreams([...init]);
}}
onSuccess={async () => {
editRoom();
setEdit(false);
}}
/>
</div>
);
}
When I am calling setStreams in RoomSettingsStreams.tsx it changes the value of the prop initStreams as well as the state variable init. I am using the spread operator so that there is no referential equality and I have checked with streams === initStreams which returns false but still the change in streams is reflected in the initStreams prop, any ideas how can I prevent it and what am I doing wrong?