передача данных при promise

у меня есть код

function Detail() {
    const { productId } = useParams();
    const item = useSelector((state) => state.item);
    const {id, imageUrl, name, desc, types, length, price} = item;
    const dispatch = useDispatch();
debugger
    const fetchOneApi = async (id) => {
        let arr = [];
        let temp = {};
        const response = await axios
        .get('http://localhost:3000/db.json')
        .catch((err) => {
            console.log(('Err', err));
        })
        .then(response => {arr = response.data.weapon})
        .then (()=>{temp = arr.find(a => a.id === Number(productId))})
        .then(console.log(temp))
        .then(dispatch(selectedWeapon(()=>{arr.find(a => a.id === Number(productId))})))

        
    }

    useEffect(() => {
        debugger
        if(productId && productId !== '') fetchOneApi(productId);

    }, [productId])

    return (
        <div>
            <br/>
            <br/>
            <br/>
            <br/>
            {productId}
            {name}
            {desc}
            Detail
        </div>
    )
}
export default Detail

в строке

.then(dispatch(selectedWeapon(arr.filter(a => a.id === Number(productId)))))

как я понимаю должен вызываться метод selectedWeapon, в который должен быть положен один item из arr если написать эту конструкцию arr.filter(a => a.id === Number(productId))) в console.log, то нет проблем этот item отображается, а вот передаваться в метод selectedWeapon этот item никак не хочет, может здесь что-то с then, подскажите кто знает, уже многое перепробовал