DEV Community: Joma

.NET Core: Custom middleware for authentication using JWT and Cookie

Joma — Fri, 20 Feb 2026 12:33:57 +0000

I will only focus on how to create a custom middleware and implement authentication logic using JSON web token stored as a cookie.

IMiddleware interface

InvokeAsync function which is inherited from the interface

Custom login function which calls a GenerateJSONWebToken method if login credentials are correct

Here's my full code:

using Test.Server.Data;
using Microsoft.EntityFrameworkCore;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;

namespace Test.Server.Middleware
{
    public class TestMiddleware : IMiddleware
    {
        private readonly TestDatabaseContext _dbContext;

        public TestMiddleware(TestContext dbContext)
        {
            _dbContext = dbContext;
        }

        public async Task InvokeAsync(HttpContext context, RequestDelegate next)
        {
            if (context.Request.Path.Equals("/auth/login", StringComparison.OrdinalIgnoreCase)
                && context.Request.Method.Equals("POST", StringComparison.OrdinalIgnoreCase))
            {
                await HandleLogin(context);
                return; 
            }

            await next.Invoke(context);
        }

        private async Task HandleLogin(HttpContext context)
        {

            if (!context.Request.HasFormContentType)
            {
                context.Response.StatusCode = 400;
                await context.Response.WriteAsJsonAsync(new { message = "Invalid content type." });
                return;
            }

            var form = await context.Request.ReadFormAsync();
            var username = form["KorisnikUsername"].ToString();
            var password = form["KorisnikPass"].ToString();

            if (string.IsNullOrEmpty(username) || string.IsNullOrEmpty(password))
            {
                context.Response.StatusCode = 401;
                await context.Response.WriteAsJsonAsync(new
                {
                    message = "Unesite kredencijale za pristupanje admin panelu!"
                });
                return;
            }

            var user = await _dbContext.PrijavaKorisnika
                .FirstOrDefaultAsync(u =>
                    u.KorisnikUsername == username &&
                    u.KorisnikPass == password
                );

            if (user != null)
            {
                try
                {
                    var tokenString = GenerateJSONWebToken(username);
                    context.Response.Cookies.Append("X-Access-Token", tokenString, new CookieOptions() { HttpOnly = true, SameSite = SameSiteMode.Strict, Secure = true });
                    context.Response.StatusCode = 200;
                    await context.Response.WriteAsync( tokenString );
                }
                catch
                {
                    context.Response.StatusCode = 500;
                    await context.Response.WriteAsJsonAsync(new { message = "Nije moguce generisati sigurnosni kljuc!" });
                }

                return;
            }

            context.Response.StatusCode = 404;
            await context.Response.WriteAsJsonAsync(new
            {
                message = "Korisnik s ovim kredencijalima ne postoji u sistemu. Pokušajte još jednom!"
            });
        }

        private string GenerateJSONWebToken(string username)
        {
            //1. claims
            var claim = new[]
            {
                new Claim(JwtRegisteredClaimNames.Sub, username),
                new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
            };

            //2.key
            var env = Environment.GetEnvironmentVariable("UserAccessToken");
            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(env));

            //3. generate a token
            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha512);
            var token = new JwtSecurityToken(

                    issuer: "https://localhost:7171",
                    audience: "https://localhost:7171",
                    claims: claim,
                    expires: DateTime.Now.AddMinutes(60),
                    signingCredentials: creds
            );


            //4. handler, writetoken
            return new JwtSecurityTokenHandler().WriteToken(token);
        }
    }
}

Explanation:

InvokeAsync function is inherited from a IMiddleware interface. We use it to do two security checks and call our custom login function.

HandleLogin is my custom login function which sends login credentials that come from a form (e.g.front-end application will send data using formData, such as React). If user is found (credentials are correct), then JSON web token will be created for that user only and stored as a cookie.

GenerateJSONWebToken is a method which returns a token created by providing a username (it is a payload) and stored as a cookie. Cookie is a much better and safer option than localStorage because token cannot be accessed by performing a XSS attack.

As you already know, middlewares can invoke the next one by calling next.Invoke(context). Our custom middleware will do the exact same thing if the requested path (URL) from front-end application doesn't include /auth/login part and the HTTP method is not a POST method. This is some sort of an explicit security check to ensure that the correct middleware and HTTP method are sent by a front-end application. When the HTTP method and URL are correct, the next part is all about credentials and how they are sent. I have chosen a form so I need to check whether the credentials are really sent from the form. This is a second security-check level. I extract two properties: KorisnikUsername and KorisnikPass from the form and send them to my database in order to check whether those two properties have correct key-value pairs or not. If the answer is YES, I then call a method to generate a proper JSON web token for that specific user and store it as a cookie.

You can test this solution in a Postman where you'll use a localhost URL with a /auth/login part, set a method to be a POST method and as a result get this kind of a response:

As you could notice in my code, it's all about the HttpContext which has two main properties: Request and Response. Request comes from a front-end application and Response is a server/middleware response.

Key steps:

Check for the requested URL and method

Check for the proper content type

Check for the credentials

If credentials are correct, generate a token and store it as a cookie which is a much safer solution

Dynamic tab title for your React app: two ways

Joma — Mon, 09 Feb 2026 09:28:27 +0000

Using a custom hook

Using React's built-in browser title component

Creating and calling a custom hook

If you want to create a custom hook to handle dynamic tab title, you can do it like this:

import {useEffect } from 'react'

function useTabTitle(title) {

  useEffect(() => {
    document.title = title;
  }, [title]);


}

export default useTabTitle

useEffect hook will take a title prop as its param and fire whenever the title changes.

Whenever you want to set a different title for other pages, you'll just call this hook with the required param:

import useTabTitle from "../pageTtitles/changetabTitle"

const Dashboard = () => {
 useTabTitle(" My dashboard");

  return (
    <div>
      <p>This is the dashboard</p>
    </div>
  )
}

export default Dashboard

Leveraging a built-in browser component

If you prefer much faster way and want to stick with the React's documentation (React documentation), you can just use a title tag as every other html tag in your React web application:

const Dashboard = () => {

  return (
    <div>
      <title>My dashboard</title>
      <p>This is the dashboard</p>
    </div>
  )
}

export default Dashboard

Azure Blob Storage in .NET Core Web API v8

Joma — Sun, 08 Feb 2026 20:03:16 +0000

Azure Blob Storage allows us to store images as URIs on Azure and in our database as varchar/strings instead of keeping them as a Blob type.

For images

Prerequisites:

Installed NuGet package: Azure.Storage.Blobs

First of all, we need to register a SCOPED service in our Program.cs file:

builder.Services.AddScoped(x =>
{
    var configuration = x.GetRequiredService<IConfiguration>();
    var connectionString = configuration["AzureBlobStorage:ConnectionString"];
    if (string.IsNullOrEmpty(connectionString))
        throw new InvalidOperationException("Azure Blob Storage connection string not found.");
    return new BlobServiceClient(connectionString);
});



builder.Services.AddScoped<BlobService>();

Then we can continue creating our service:

public class BlobService
{
    private readonly BlobContainerClient _containerClient;

    public BlobService(IConfiguration config)
    {

        var connectionString = config["ConnectionStrings:AzureBlobStorage"];
        var containerName = config["AzureBlobStorage:ContainerName"];

        if (string.IsNullOrEmpty(connectionString))
            throw new Exception("Azure Blob Storage connection string not found!");

        _containerClient = new BlobContainerClient(connectionString, containerName);

    }

    //uploading an image
    public async Task<string> UploadAsync(IFormFile file)
    {
        var blobClient = _containerClient.GetBlobClient(file.FileName);
        await blobClient.UploadAsync(file.OpenReadStream(), true);

        return blobClient.Uri.ToString();
    }


    //delete the image
    public async Task DeleteAsync(string blobUrl)
    {
        var blobName = Path.GetFileName(blobUrl);
        var blobClient = _containerClient.GetBlobClient(blobName);
        await blobClient.DeleteIfExistsAsync();
    }

}

NOTE: connectionString and containerName are stored in appsettings.json but it would be better if they were stored as ENV values in our project.

BlobServiceClient: This class allows us to manipulate Azure Storage resources and blob containers

BlobContainerClient: This class allows us to manipulate Azure Storage containers and their blobs.

BlobClient: This class allows us to manipulate Azure Storage blobs. It's very crucial for us

Key steps:

Creating and registering a BlobServiceClient
Creating a BlobContainerClient with provided connectionString and containerName
Initializing a BlobClient with our file and its name
Uploading our file to the container or optionally our database using BlobClient
Deleting our file from a container or optionally our database using BlobClient _____________________________________________________________

Consuming our BlobService in an API controller

Uploading an image:

var imageUrl = await _blobService.UploadAsync(novosti.FormFile);
novosti.NovostiSlikaUrl= imageUrl;

novosti.FormFile is my object which has unmapped property FormFile which I use to handle Blob types and NovostiSlikaUrl is an object property mapped with my database's field to store these images as URI after uploading them to my Azure container.

Deleting an image:

 if (!string.IsNullOrEmpty(novostiobavijesti.BunjoNovostiSlikaUrl))
 {
     await _blobService.DeleteAsync(novostiobavijesti.BunjoNovostiSlikaUrl);
 }

Image is deleted from a container and from my database, too.

Deploy your React personal website using Cloudflare Hosting solution and GitHub

Joma — Sun, 08 Feb 2026 17:17:31 +0000

Prerequisites:

GitHub repo
Cloudflare account
wrangler.jsonc file added to the project

On the left side of your Cloudflare dashboard find these two tabs:

Click on a blue button with the caption: Create application on the right side of the page. The button will navigate you to the separate dashboard where you'll be able to choose a worker:

Select an option to connect with GitHub, follow their simple steps, wait for them to install your dependencies and build your project.

Possible errors

If there are any errors, the log will tell you what's happening and it is likely you forgot to add a wrangler.jsonc file with the following configuration:

{
    "name": "worker-name",
    "compatibility_date": "2026-02-08",
      "assets": {
        "directory": "./dist"
      }
}

Fisher-Yates algorithm explained (C#)

Joma — Sun, 08 Feb 2026 12:51:40 +0000

Using the random selection method, we select elements with equal probability of selection, respecting the rule that no element in the iteration is omitted. However, the algorithm doesn't always follow that rule.

In this example:

[HttpPost("PasswordGenerator")]
public string GeneratePassword()
{

    const string symbols = "!@#$%^&*()[]{}|;:,<>?";
    const string numbers = "0123456789";
    const string letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    const string allChars = symbols + numbers + letters;


    Random random = new();


    try
    {
        char[] passwordArray = allChars.ToCharArray();

        for (int i = passwordArray.Length-1; i > 0; i--)
        {
            int j = random.Next(i+1);
            (passwordArray[i], passwordArray[j]) = (passwordArray[j], passwordArray[i]);
        }

        return new string(passwordArray);

    }
    catch
    {
        return new string("nema passworda");
    }


}

I want to generate a random password from the given characters. In the beginning there are strings which I concat then break into an array of single characters.
Algorithm start its job from a for loop where it picks a last character on the last index (if the last index is 21, the picked character is z)
int i = passwordArray.Length-1; i > 0; i--
i-- tells us that is going backward, not forward.

int j = random.Next(i+1); is a randomly picked index between given span of indexes (if the i+1 = 10, than j has to be some random index picked between 0 and 10).

(passwordArray[i], passwordArray[j]) = (passwordArray[j], passwordArray[i]); --> this is called a tuple swap method which literally just swaps the positions. The right side (passwordArray[j], passwordArray[i]) creates a tuple with those two values, then the left side deconstructs it back into the array positions in reverse order.

Authentication and Authorization (React and ASP.NET Core Web API v8) using JSON Web Token

Joma — Sat, 07 Feb 2026 21:58:57 +0000

JWT is a modern way of authorizing a user’s access to protected sources, accepted by a server. Server generates a special token after authenticating a user. React app sends a login credentials e.g. username and password which are checked by a server. If both of them are correct, logged in user gets a “VIP ticket” which can be used all across the same web or mobile app. Generated token can be configured to expire which will make React app to ask for another token so the user can with no interruptions continue to use the app.

In this example a server is Web API and client is, as you could already see, a React.

We should register a JWT configuration in Program.cs file like this:

using Microsoft.AspNetCore.Authentication.JwtBearer;

//CORS POLICY
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowOrigin", policy =>
    {
        policy.WithOrigins("http://localhost:5173")
                       .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials();
    });
});


var env = Environment.GetEnvironmentVariable("UserAccessToken");
if (string.IsNullOrEmpty(env))
{
    throw new InvalidOperationException("Environment variable 'UserAccessToken' is not set.");
}

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = "https://localhost:7171",
            ValidAudience = "https://localhost:7171",
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(env))
        };
    });




app.UseAuthentication();
app.UseAuthorization();

“UserAccessToken” is a 512 hash code that I’ve put in as a ENV property of this project (VS Studio 2022 Toolbar: Project tab > [Your Solution name] Properties > search for a env keyword)

A function which will create a token and return it

private string GenerateJwtToken(string username)
{
    var claims = new[]
    {
         new Claim(JwtRegisteredClaimNames.Sub, username),
         new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
    };

    //var superKey = Convert.ToBase64String(RandomNumberGenerator.GetBytes(64));
    var env = Environment.GetEnvironmentVariable("UserAccessToken");
    var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(env));
    var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha512);

    var token = new JwtSecurityToken(
        issuer: "https://localhost:7171",
        audience: "https://localhost:7171",
        claims: claims,
        expires: DateTime.Now.AddMinutes(60),
        signingCredentials: creds
    );

    return new JwtSecurityTokenHandler().WriteToken(token);
}

We will call this function in our login function if the user credentials are correct.

After receiving a 200 response from our server with a generated token, our React app will send that token whenever it wants to make another API call. But, we need to be careful! If the server set the token as a cookie (see the above example), React does not need to send a token at all.

I’ll show you the difference where token is set to localStorage by a client app and when it’s stored as a cookie by a server. Both of these are visible in our Application tab of the browser but not accessible in a same way. localStorage is vulnerable because of XSS attacks so it’s not recommended at all!

When the token is set in a localStorage, React app sends API requests like this:

const res = await axios.get("https://localhost:7171/authentication/ControllerName/anotherapireq", {
  headers: {
    Authorization: `Bearer ${tokenSifra}`
  }
});

When the token is set by a server:

axios.defaults.withCredentials = true;

useContext: simplicity matters

Joma — Fri, 06 Feb 2026 19:41:24 +0000

Props drilling is a good way of learning that nested components can send and receive properties, but in terms of simplicity and readability, props drilling is really just a pain int the a.. 😊. That's why we need useContext hook!

Steps are simple:
1. Create a context

2. Create a provider which will send properties to child components

3. Consume these properties

I created a parent component called Login.jsx where I handle user inputs using useReducer hook. The state I want to pass to other child component Middleware.jsx is const[isAuthenticated, setIsAuthenticated] = useState(false) so I've should also create a Provider which wraps child component providing it with isAuthenticated prop. Middleware will consume that prop and read its value whenever it changes inside parent component and render another child component, Dashboard.jsx. If the isAuthenticated true, user will see rendered Dashboard but if it's not, there will be a custom message as a warning.
If I passed a isAuthenticated to the child component, what should I do with its setter function? Setter function allows me to change a state of the observable prop so the child components know what to do based on the given value.

A bigger picture:

Creating a context and its hook (hook is optional but it gives us a secure fallback if we for example forget to create a provider but still passing props)

AuthenticationContext.jsx

import { createContext, useContext } from "react";

//create a context
export const AuthenticationContext = createContext(null);


//create a custom hook to handle issues with context being null
export const useAuthenticationHook = () =>{
    const context = useContext(AuthenticationContext);
    if(!context){ throw new Error("Context is null, you should check your provider.")}
    return context;
}

Creating a provider in a parent component passing a mutable prop to a child component and handling user authentication Login.jsx

import React, { useState, useReducer } from 'react'
import { AuthenticationContext } from './AuthenticationContext';
import Middleware from './Middleware';

const Login = () => {
    //MUTABLE state
    const[isAuthenticated, setIsAuthenticated] = useState(false);
    //useReducer: initialState, dipatch, reducer | state

    const initialState = {username:'', password:''};
    function reducer (state, action){
        switch(action.type){
            case 'handleTextState':
                return {
                    ...state,
                    [action.field] : action.value

                }
        }

    }

    const[state, dispatch] = useReducer(reducer, initialState);

    function handleUserLogin(e){
        //prevent form reset
        e.preventDefault();
        //set shareable state to true if the user is correct
        /* const res = await fetch('your api endpoint for login',{
        method:'POST',
        body: JSON.stringify({state.username, state.password})
        })
        if(res.status === 200){
        setIsAuthenticated(true);
        } */

        setIsAuthenticated(true);
    }



  return (
    <div>
        <h3>To see your dashboard, please login first!</h3>
        <div>
            <form onSubmit={handleUserLogin}>
                <input placeholder='Your username...' name="username" value={state.username} type="text" onChange={(e)=> dispatch({
                    type:"handleTextState",
                    field:e.target.name,
                    value:e.target.value
                })} />

                 <input placeholder='Your password...' name="password" value={state.password} type="text" onChange={(e)=> dispatch({
                    type:"handleTextState",
                    field:e.target.name,
                    value:e.target.value
                })} />
                <button type="submit">Login</button>
            </form>
            <div>
                <AuthenticationContext.Provider value {{isAuthenticated}}>
                <Middleware />
                </AuthenticationContext.Provider>
            </div>
        </div>
    </div>
  )
}

export default Login

Using a passed prop inside a child component and reading its value

Middleware.jsx

import React from 'react'
import { useAuthenticationHook } from './AuthenticationContext'
import Dashboard from './Dashboard';

const Middleware = () => {
    const {isAuthenticated} = useAuthenticationHook();
  return (
    <div>
        {
         isAuthenticated ? <Dashboard /> : <p>You need to login first!</p>
        }
    </div>
  )
}

export default Middleware

useReducer vs useState

Joma — Thu, 05 Feb 2026 19:23:02 +0000

Both of these hooks do the same thing... but in a different way. What we write for useReducer hook, the same magic is happening 'behind the scenes' for useState (we see only it's result!).

Let's see the example:

1. useState

    const[contactName, setContactName] = useState("");
    const[contactImage, setContactImage] = useState(null);
    const[contactImageUrl, setContactImageUrl] = useState(null);

    function handleImageUpload(e) {
        const file = e.target.files[0];
        const fileName = e.targe.files[0].name;

        if(!file) return;

        const matchRgx = fileName.match(/\.(jpg|png|jpeg)/);
        if (matchRgx != null) {
            setContactImageUrl(URL.createObjectURL(e.target.files[0]));
        }
        else {
             setContactImage(null);
             setContactImageUrl(null);
        }
    }

    function handleForm(e) {
        e.preventDefault();
        window.alert("Successfully added a contact!");
    }

    return (
        <div>
            <form onSubmit={handleForm}>

                <small>Name:</small>
                <input
                    value={contactName}
                    type='text'
                    onChange={(e)=> setContactName(e.target.value)}
                />

                <small>Image:</small>
                <input
                    type='file'
                    accept='image/jpeg,image/png,image/jpg'
                    onChange={handleImageUpload}
                />

                <img src={contactImageUrl} />

                <button type='submit'>Submit</button>
            </form>
        </div>
    )
}

2. useReducer

const initialFormState = { contactName: '', contactImage:null, contactImageUrl:null };

function reducer(state, action) {
    if (action.type === 'setState') {
        return {
            ...state,
            [action.field]: action.value
        };
    } else if (action.type == "ImageUpload") {
        return {
            ...state,
            contactImage: action.file,
            contactImageUrl: action.url
        }
    }
    return state;
}

const ReducerHook = () => {
    const [state, dispatch] = useReducer(reducer, initialFormState);

    function handleImageUpload(e) {
        const file = e.target.files[0];
        const fileName = e.targe.files[0].name;

        if(!file) return;

        const matchRgx = fileName.match(/\.(jpg|png|jpeg)/);
        if (matchRgx != null) {
            const imageUrl = URL.createObjectURL(e.target.files[0]);
            dispatch({
                type:"ImageUpload",
                file:e.target.files[0],
                url: imageUrl
            })

        }
        else {
             dispatch({
                type:"ImageUpload",
                file:null,
                url: null
            })

        }
    }

    function handleName(e) {
        e.preventDefault();
    }

    return (
        <div>
            <form onSubmit={handleName}>
                <small>Name:</small>
                <input
                    name="contactName"
                    value={state.contactName}
                    type='text'
                    onChange={(e) => {
                        dispatch({
                            type: 'setState',
                            field: e.target.name,
                            value: e.target.value
                        })
                    }}
                />

                <small>Image:</small>
                <img src={state.contactImageUrl} />
                <input
                    type='file'
                    accept='image/jpeg,image/png,image/jpg'
                    onChange={handleImageUpload}
                />

                <button type='submit'>Submit</button>
            </form>
        </div>
    )
}

export default ReducerHook

EXPLANATION:
When using a useState hook, we directly define a setter functions (something, setSomething) and call them for every state we want to track, differently.
However, useReducer has its own setter function which is literally shared among states. That means that we don't need to define more setter functions for every state we want to track. That setter function is called a reducer.
const[state, dispatch] = useReducer(reducer, initialState)

state is a container will all the data we want to manipulate with
dispatch is communicating with a reducer function by sending instructions about what should be changed and how
reducer is the actual function that submits changes
initialState is an object with all the initial states

React v19: useTransition hook with

Joma — Mon, 05 Jan 2026 22:37:08 +0000

I was playing around with useTransition hook (https://react.dev/reference/react/useTransition) and noticed that it doesn't keep data when a particular UI component loses its focus (e.g. user navigates to somewhere else while component is rendering its content, calculating something or fetching a really heavy data), which is obvious 😉 but what if I want them to keep its data "live" and not to fetch or calculate over and over when user comes back? One of the solutions is using wrapper like this:

 <Activity>
   <div>{data}</div>
  </Activity>

Activity has two props and one of them is mode which can be visible or hidden (https://react.dev/reference/react/Activity).
If omitted, it stays visible by default which is exactly what I wanted!

🗝️Key steps I took:

used useTransition hook and called startTransition function (React calls it Action)

 const [isPending, startTransition] = useTransition();

created a custom delay function to simulate fetching a heavy data with dummyjson.com API and called it inside startTransition before fetching

const delay = async (ms) => {
    return new Promise((resolve) => setTimeout(resolve,ms));
};


 startTransition(async () => {
   if (key === "profile") {
     await delay(1100);
     await fetchData();
 }

*wrapped fetched data with Activity wrapper to keep data visible after particular UI component loses its focus *

 <div>
      <Tabs
        activeKey={defaultTabKey}
        onSelect={handleTabChange}
        defaultActiveKey="home"
        id="uncontrolled-tab-example"
        className="mb-3"
      >
        <Tab eventKey="home" title="Home">
          Tab content for Home
        </Tab>
        <Tab eventKey="profile" title="Profile">
          <Activity>
            <div>{data}</div>
          </Activity>
        </Tab>
        <Tab eventKey="contact" title="Contact">
          Tab content for Contact
        </Tab>
      </Tabs>
       <p>{isPending ? "Fetching data..." : ""}</p>
    </div>

🎯So the result is fetched data that is always present even tough user navigates to somewhere else (in my case when user clicks on another tab inside tab group)

Full code is available at (https://github.com/majalojo/reactv19.git)

Here's the image of the source code:

❗Main gap and recommendations
We see data is present when user comes back to a profile Tab, but we also see that isPending fired again so that means startTransition and handleChange, too. Is there any solution to make useTransition and Activity cooperate, or is it a default React's DOM behaviour? So this solution should be updated in the future regarding this gap.