React Hooks, copied data keeps changing original source data - reactjs

Question

I'm creating a filtering page. I make a call to the api and then I copy the data so that with each filter requests i'm filtering from the original source. But for some reason when i'm filtering it's modifying my source. So when i filter twice its giving me wrong data. I put flags to make sure my reducer isnt' being called again.
import React, {
useEffect,
useState
} from 'react';
import {
useDispatch,
useSelector
} from "react-redux";
import {
useParams
} from "#reach/router"
import {
fetchSession
} from "../actions/dataActions";
import _ from 'lodash'
import {
useFormik
} from 'formik';
function PageFilter() {
const sessionData = useSelector(state => state.sessionData); //redux
const [filteredData, setFilteredData] = useState([]);
const formik = useFormik({
initialValues: {
date: '',
sessionType: '',
events: ''
},
onSubmit: values => {
filterData(values) //when i hit submit filter data
},
});
function filterData(values) {
let tempFilter = [];
if (values.date != '') {
sessionData.schedule_by_day.map((c, i) => {
if (c.date === values.date) {
tempFilter = [...tempFilter, c];
}
});
} else {
tempFilter = [...sessionData.schedule_by_day];
}
if (values.sessionType != '') {
tempFilter.map((c, i) => {
let tempSessionType = [];
c.session_types.map(s => {
if (parseInt(values.sessionType) == s.id) {
tempSessionType = [...tempSessionType, s]
}
});
tempFilter[i].session_types = [...tempSessionType];
//!!!!!!!
//this is a problem issue, it keeps changing my original data
//so when i call this again it's filtering from a modified SessionData
//!!!!!!!
})
} else {
}
setFilteredData([...tempFilter])
}
useEffect(() => {
dispatch(fetchSession(params.id)); //request data and updates state.sessionData
}, [])
useEffect(() => {
///when sessionData is updated filter the Data based off default form values which displays everything
if (_.isEmpty(sessionData) == false) {
filterData(formik.values)
}
}, [sessionData])

Answer 1

Yes, you are doing a state mutation with tempFilter[i].session_types = [...tempSessionType];. When you update any part of state you must copy it first then update the property.
It is actually rather unclear what you are really trying to do in this handler. You map a bunch of data, but don't return or save the result. It appears as though you meant to use array::forEach to issue a side-effect of pushing elements into an external array. That being said, the following is how you would/should copy the element at the specified index and create a new session_types property object reference so you are not mutating the original reference.
tempFilter[i] = {
...tempFilter[i],
session_types: [...tempSessionType],
}