How to remove piecemeal loading from WMS Geoserver and load the entire map using react-leaflet?

I’m implementing a timelapse, selecting a date range, but I’m not able to show the entire map at once, it’s loading via Tiles.

const Map = () => {
    const [selectedLayers, setSelectedLayers] = useState([]);
    const [timelapseActive, setTimelapseActive] = useState(false);
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(new Date());

    const timelapseLayers = filterR["Filter"];

    useEffect(() => {
        let interval;
        if (timelapseActive) {
            interval = setInterval(() => {
                setSelectedDate(currentDate => {
                    let nextDate = new Date(currentDate);
                    nextDate.setDate(nextDate.getDate() + 1);
                    if (nextDate > endDate) {
                        nextDate = startDate;
                    }
                    return nextDate;
                });
            }, 3000);
        }

        return () => {
            if (interval) {
                clearInterval(interval);
            }
        };
    }, [timelapseActive, startDate, endDate]);

    const renderTimelapseWmsTiles = (selectedDate, layers) => {
        return layers.map(layer => {

            const timeParam = { time: selectedDate.toISOString().split('T')[0] };

            return (
                <WMSTileLayer
                    key={`${layer.name}-${selectedDate}`}
                    url={layer.wms_url}
                    layers={layer.name}
                    format="image/png"
                    transparent={true}
                    version="1.3.0"
                    {...timeParam}
                />
            );
        }).filter(component => component !== null);
    };
....
return (
    ....

Does anyone know a possible solution for this? I’ve already tried saving it in useState and then showing it to the map, but it still doesn’t work.