react-table with localstorage column toggle - redux

Question

{
Header: "Interactions",
Cell: ({ row }) => {
if (store.getState().table.portfolio.includes(row.original)) {
return (
<div>
<button
className="column-interactions"
onClick={() => removeTicker(row.original)}
>
<AiFillHeart />
</button>
</div>
);
} else
return (
<div>
<button
className="column-interactions"
onClick={() => chooseTicker(row.original)}
>
<AiOutlineHeart />
</button>
</div>
);
},
},
At start the column return the else part, as portfolio inside reducer 'table' is empty, it even works fine when i click on the button to store it in redux. Basically it toggles and the data comes and goes from the redux state.
const chooseTicker = (data) => {
if (store.getState().table.portfolio.length <= 5) {
store.dispatch({
type: ADD_PORTFOLIO,
payload: data,
});
let existingPortfolio = JSON.parse(localStorage.getItem("portfolioToken"));
if (existingPortfolio == null) existingPortfolio = [];
existingPortfolio = [...existingPortfolio, data];
localStorage.setItem("portfolioToken", JSON.stringify(existingPortfolio));
}
};
const removeTicker = (data) => {
store.dispatch({
type: REMOVE_PORTFOLIO,
payload: data,
});
let existingPortfolio = JSON.parse(localStorage.getItem("portfolioToken"));
const index = existingPortfolio.findIndex(function (stock) {
return stock.sec_ticker === data.sec_ticker;
});
existingPortfolio.splice(index, 1);
localStorage.setItem("portfolioToken", JSON.stringify(existingPortfolio));
};
But as soon as i refresh the page, the toggle goes back to its default state, which is the else part. But my redux persists the data.
This is how im taking the data from localstorage to redux initial state
const portfolioToken = JSON.parse(localStorage.getItem("portfolioToken"));
let initialState = {};
if (portfolioToken) {
initialState = {
hasPortfolio: !empty(portfolioToken),
portfolio: portfolioToken,
portfolio_like: [],
selected: "all",
rows: [],
weeks: [],
weekSelected: "",
scoreStyle: "scores",
data: {},
isLoading: true,
};
} else {
initialState = {
hasPortfolio: false,
portfolio: [],
portfolio_like: [],
selected: "all",
rows: [],
weeks: [],
weekSelected: "",
scoreStyle: "scores",
data: {},
isLoading: true,
};
}