Define multiple layers in Kepler.gl with different Data? - reactjs

Question

iam new to react, redux, javascript and also Kepler.gl.
My Question is the following:
I managed it to define multiple datasets without any tutorial, by lucky try. (Kepler.gl has no good documentation sadly)
I tried to define "data2" and fill it with an other source of data, so i can bind it to i specific layer. But every time i associate it to a layer, the layer disappears in the List like there was no data. I checked both sources single and both are fine. Its like it only accept the data const not any other. I also replaced all data const with data2 const and it stopped working. So i think it is a problem to the const. Do you guys see what iam missing?
This is the original code with one data source:
import React from "react";
import keplerGlReducer from "kepler.gl/reducers";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {taskMiddleware} from "react-palm/tasks";
import {Provider, useDispatch} from "react-redux";
import KeplerGl from "kepler.gl";
import {addDataToMap} from "kepler.gl/actions";
import useSwr from "swr";
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
const mapboxApiAccessToken = "pk.eyJ1IjoiaHN1bGRlIiwiYSI6ImNsMWNlZ3ZtaTA0MXgzZXF4eGYybmExOWwifQ.-VMvsl27bE0dhoRRY8xMrw";
export default function Kglapp() {
return (
<Provider store={store}>
<Map/>
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const {data} = useSwr("test", async () => {
const response = await fetch(
".\\mapdatajson\\covid19.json"
);
const data = await response.json();
return data;
})
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-1", id: "test-1"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-2", id: "test-2"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-3", id: "test-3"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-4", id: "test-4"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-5", id: "test-5"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-6", id: "test-6"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-7", id: "test-7"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-8", id: "test-8"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-9", id: "test-9"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-10", id: "test-10"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-11", id: "test-11"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-12", id: "test-12"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-13", id: "test-13"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-14", id: "test-14"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-15", id: "test-15"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-16", id: "test-16"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-17", id: "test-17"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-18", id: "test-18"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-19", id: "test-19"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-20", id: "test-20"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
}
,
[dispatch, data]
);
return (
<KeplerGl
id="test"
mapboxApiAccessToken={mapboxApiAccessToken}
width={window.innerWidth}
height={window.innerHeight}
/>
);
}
Do somebody have any ideas how to set different sources to the layers without let it dissapear for dubious reasons?
Thank you for your help.