How to dynamically use fallback tiles from the previous zoom level of the same server in Leaflet?

Question

I'm working on a mapping application using React with Leaflet for tile rendering. When tiles fail to load (due to network issues, server downtime, tiles not available), I want to dynamically use fallback tiles from the previous zoom level of the same server. This approach ensures a seamless user experience without resorting to static images or switching to a different server.

    const MyMap: React.FC = () => {
    const primaryTileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

    const handleTileError = useCallback((event: L.TileEvent) => {
      console.log(event);
    }, []);

    return (
        <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
            <TileLayer
                url={primaryTileUrl}
                eventHandlers={{
                    tileerror: handleTileError,
                }}
            />
            <MapEvents />
        </MapContainer>
    );
};
export default MyMap;

How can Leaflet and React be able to efficiently handle fallback tiles from the same server's prior zoom level dynamically?

I'm seeking advice and examples on how to implement this functionality using Leaflet and React effectively. Any insights or alternative approaches would be greatly appreciated. Thank you!