input onKeyDown not work in dialog fancybox

[Mijeko]

Hi, i have trhee components. Not work onKeyDown in FindCity component when calling modal dialog . Help please

`
import React, {useEffect, useState} from "react";
import Fancybox from "./Fancybox";
import FindCity from "../Form/FindCity";
import CityList from "./CityList";

const CityDialog = ({settgins}) => {

const [models, setModels] = useState(settgins.models);

return <>
    <Fancybox>
        <div className="header-select-city">
            <div className="header-select-city-title">Ваш город:</div>
            <div data-fancybox="dialog" data-src="#dialog-content" className="header-select-city-target">Барнаул</div>
        </div>

        <div id="dialog-content" className="header-select-city-dialog">

            <h2>Выбрать ваш город</h2>

            <FindCity actions={{setModels}} models={models}/>

            <CityList models={settgins.previewModels}/>
        </div>
    </Fancybox>
</>;

};

export default CityDialog;

import React, {useCallback} from "react";

const FindCity = ({models, actions}) => {

let handleTypingText = () => {
    console.log('aosncoasnco');
    // console.log(event.target.value);
    // actions.setModels([]);
};

return <>
    <form className="city-find-form" method="POST">
        <input className="city-find-form-input" name="city" type="text" onKeyDown={handleTypingText}/>
    </form>
</>;

};

export default FindCity;

import React, {useEffect} from "react";
import {Fancybox as NativeFancybox} from "@fancyapps/ui/dist/fancybox.esm.js";

function Fancybox(props) {
const delegate = props.delegate || "[data-fancybox]";

useEffect(() => {
    const opts = props.options || {};

    NativeFancybox.bind(delegate, opts);

    return () => {
        NativeFancybox.destroy();
    };
}, []);

return <>{props.children}</>;

}

export default Fancybox;
`