react-simple-keyboard layout won't change to arabic

Question

I am using react-simple-keyboard and I want to change the layout to Arabic but I couldn't. Note : I'm using react 18.2.0

This is my SearchBar component:

import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import TextField from "@mui/material/TextField";
import React, { useState, useRef, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Tooltip from "@mui/material/Tooltip";
import FormControl from '@mui/material/FormControl';
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";




const SearchBar = () => {
  const [inputValue, setInputValue] = useState("");
  let navigate = useNavigate();
  const onValueChange = (event) => {
    setInputValue(event.target.value);
  };
  const onSearch = (event) => {
    event.preventDefault();
    if (inputValue.length >= 1) {
      navigate("/SearchResult");
    }
  };
  const [input, setInput] = useState("");
  const [layout, setLayout] = useState("default");
  const keyboard = useRef();
  const [keyboardVisibility, setKeyboardVisibility] = useState(false);

  useEffect(() => {
    function clickHandler(e) {
      if (
        !(e.target.nodeName === "INPUT") &&
        !e.target.classList.contains("hg-button") &&
        !e.target.classList.contains("hg-row")
      ) {
        setKeyboardVisibility(false);
      }
    }

    window.addEventListener("click", clickHandler);
    return window.removeEventListener("click", clickHandler, true);
  }, []);

  const onChange = (input) => {
    setInput(input);
    console.log("Input changed", input);
  };

  const handleShift = () => {
    const newLayoutName = layout === "default" ? "shift" : "default";
    setLayout(newLayoutName);
  };



  const onKeyPress = (button) => {
    console.log("Button pressed", button);
    if (button === "{shift}" || button === "{lock}") {
      handleShift();
    } if (button === "{<enter}") {
      onSearch();
    }
     else {
      console.log("Button pressed", button);
    }
  };

  const handleChange = (e) => {
    const input = e.target.value;
    setInput(input);
    keyboard.current.setInput(input);
  };

  return (
    <form>
      <TextField
        InputProps={{
          startAdornment: (
            <FormControl  sx={{ mr: 35, }}>
              <Tooltip title="Search" placement="bottom">
                <IconButton type="search" aria-label="search" onClick={onSearch}>
                  <SearchIcon sx={{ p: '10px', }}/>
                </IconButton>
              </Tooltip>
            </FormControl>
          ),
        }}
        id="search-bar"
        className="text"
        onChange={(e) => {onValueChange(e); handleChange(e);}}
        value={input}
        variant="outlined"
        placeholder=""
        size="small"
        inputProps={{min: 0, style: { textAlign: 'right' }}}
        onFocus={() => {
          setKeyboardVisibility(true);
        }}
      />
      {
          keyboardVisibility && (
              <Keyboard
                  keyboardRef={r => (keyboard.current = r)}
                  layoutName={layout}
                  onChange={onChange}
                  onKeyPress={onKeyPress}
              />
          )
      }
    </form>
  );
};

export default SearchBar;